2013-08-08 3 views
0

Я хочу генерировать таблицу динамически, используя Angular JS, в зависимости от того, что отмечено на некоторых флажках. Проблема в том, что есть несколько полей, мы будем называть их отношением/столбцом, что я хочу отображать ВСЕГДА, а остальные поля - только если их поле отмечено. Отношение выполняется через окно поиска (отношения могут иметь несколько столбцов), и я хочу отображать только свойства этого отношения, которые имеют отношение к пользователю.AngularJS, флажки и генерация динамического html

Так

Update Time [X] 
Update Status [ ] 
Time Zone [ ] 

бы показать некоторый HTML вдоль линий

<table> 
    <tr> 
     <th> Relation </th> 
     <th> Column </th> 
     <th> Update Time </th> 
    </tr> 
    <tr ng-repeat= "result in results"> 
     <td> {{result.relation}} </td> 
     <td> {{result.column}} </td> 
     <td> {{result.update_time}}</td> 
    </tr> 

Если никаких ящиков не были проверены, только отношение и столбцы поля будут заполнены. Документация для Angular JS ведет меня повсюду, так кто-нибудь может подумать о том, как это сделать?

редактирования: контроллер не работает совсем еще, мне еще нужно отфильтровать результаты поиска, но в основном это идет

$scope.search = function(){ 

    //validate form input 

    //create url with the input recieved 

    $http.get(url).success(function(data){ 
     $scope.results = angular.fromJson(data); 
    }); 
} 

Я использую Mojolicious бэкенд, чтобы захватить данные, которые я хочу. Опять же, проблема заключается не в том, что я не могу получить никаких данных, или что я не могу фильтровать результаты на основе отношения. Я хочу иметь возможность искать на основе отношения и отображать только атрибуты этого отношения, которые я хочу, на основе того, что проверено. ЭТО часть, я не могу понять.

изменить еще раз: брандмауэр, где я нахожусь, запрещает мне писать комментарии/повышать. Вы будете вознаграждены за вашу помощь, когда я вернусь домой сегодня вечером. Спасибо Спасибо!

+1

Умение отправить ваш контроллер? – tymeJV

ответ

0

Я предложил бы использовать пользовательский фильтр с Флажок области видимости переменных, передаваемых в нечто вроде этого:.

HTML

<input type="checkbox" ng-model="checkbox1" /> 
<input type="checkbox" ng-model="checkbox2" /> 
<input type="checkbox" ng-model="checkbox3" /> 
... ng-repeat= "result in results|checkboxFilter:{checkbox1,checkbox2,checkbox3}" 

filter.js

.filter('checkboxFilter', function() { 
    return function (results, checkbox1, checkbox2, checkbox3) { 

    var filtered_objects = angular.copy(results); 

    for (var i = 0, len = filtered_objects.length; i < len; i++) { 
     **modify your filtered_objects based on your checkboxes** 
      if (checkbox1) ... 
      if (checkbox2) ... 
      if (checkbox3) ... 
    } 

return filtered_objects; 

    } 
}); 

Может быть что-то вроде того.

2

Я думаю, что лучший способ сделать это - использовать выражения ng-show, привязанные к переменной в модели.

Например.

<input type="checkbox" ng-model="updateTime"> 

делает флажок и связывает результат с $ scope.updateTime. Затем вы можете использовать эту переменную позже через нг-шоу директивы, как так ...

<th ng-show="updateTime"> Update Time </th> 

... 

<td ng-show="updateTime"> {{result.update_time}}</td> 

это означает, что эти элементы будут отображаться только когда updateTime установлено значение истинно (то есть флажок.)

Здесь вы можете увидеть пример, я только применил одно поле, но его можно легко расширить!

http://plnkr.co/edit/W6Ht6dnGw4fBplI83fB1?p=preview

Смежные вопросы