0

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

所以

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

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

4

2 回答 2

2

我认为最好的方法是使用绑定到模型中变量的 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

于 2013-08-08T15:28:42.710 回答
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}"

过滤器.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;

  }
});

也许是这样的。

于 2013-08-08T15:21:37.860 回答