Question

我想根据在某些复选框上检查的内容，使用Angular JS动态生成表。问题是有几个字段，我们称之为关系/列，我想显示ALWAYS，剩下的字段只有在选中它们的框时才会显示。通过搜索框搜索关系（关系可以有多列），我想只显示与用户相关的那种关系的属性。

所以

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后端来获取我想要的数据。同样，问题不在于我无法获取任何数据，或者我无法根据关系过滤结果。我希望能够基于关系进行搜索，并且只根据检查的内容显示我想要的关系的属性。那部分，我无法弄清楚。

再次编辑：我所在的防火墙阻止我写评论/ upvoting。我今晚回家后会得到你的帮助。谢谢，谢谢！

Answer 1

我认为最好的方法是使用绑定到模型中变量的ng-show表达式。

例如。

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

生成一个复选框并将结果绑定到$ scope.updateTime。然后您可以通过ng-show指令稍后使用此变量，如此...

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

...

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

这意味着这些元素只会在updateTime设置为true时显示（即选中复选框。）

你可以在这里看到一个例子，我只实现了一个字段，但应该可以很容易地扩展它！

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

Answer 2

我建议使用传入复选框范围变量的自定义过滤器。如下所示：

<强> 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;

  }
});

也许是这样的。

AngularJS，复选框和生成动态html

2 个答案: