Question

我使用ng-model为我的范围构建了一个带有角度绑定复选框的过滤器，遵循此示例Angularjs filtering with checkboxes

过滤器工作正常，但我想在每个过滤器上显示一个标签。为此，我尝试在完成所有过滤的范围内进行ng-repeat，但是我无法显示正确的文本。

我的标记是这样的：

<div ng-app="myApp" ng-controller="Ctrl">
{{ctrlTest}}<hr/>
<div ng-repeat="elements in filter">
    <div ng-repeat="n in elements">
        <li ng-repeat="x in n" ng-show="n=true">{{n}}
             <a ng-click="n=false"> X</a>
        </li>
    </div>
</div>
</div>

angular.module('myApp', [])
.controller('Ctrl', function($scope) {
    $scope.ctrlTest = "Filters";
        $scope.filter = [{"producers":  {"Ford":true,"Honda":true,"Ferrari":true}}]
});

过滤完成后，显示的数据是$scope.filter中显示的数据我的问题是我无法正确显示数据（所需的输出将是三个标签，每个标签显示每个名称：福特，本田和法拉利）。我还希望能够通过单击旁边的X来删除标签。

以下是我迄今为止尝试做的事情：http://jsfiddle.net/Joe82/wjz8270z/2/

提前致谢！

Answer 1

这很有效。请注意，我需要对您的JSON进行一些更改。更新了您的JSFiddle。

<div ng-app="myApp" ng-controller="Ctrl">
    {{ctrlTest}}<hr/>
    <div >
        <div ng-repeat="n in filter.producers">        
            <li ng-show="n.checked==true"><a ng-click="remove(n)">{{n.Brand}} X</a>
            </li>
        </div>
    </div>
</div>

angular.module('myApp', [])
    .controller('Ctrl', function($scope) {
        $scope.ctrlTest = "Filters";
            $scope.filter = {
              "producers": [
                {
                 "Brand": "Ford",
                 "checked": true
                },
                {
                 "Brand": "Honda",
                 "checked": true
                },
                {
                 "Brand": "Ferrari",
                 "checked": true
                }]
         };

    $scope.remove = function(producer){
      producer.checked = false;
      console.log(producer);
    }    
});

使用Angular中的标记进行过滤

1 个答案: