0

在标签集中时，我遇到了过滤器问题。

angular.module('myModule', ['ui.bootstrap']);
angular.module('myModule').controller('ModalController', function($scope) {
$scope.favsLib = [1, 19];
$scope.docsLib = [{
    "id": 19
}, {
    "id": 23
}];
$scope.checkboxDoc = false;
$scope.favFilter = function (docsLib) {
    if ($scope.favsLib.length > 0 && $scope.checkboxDoc == true) {
        if ($.inArray(docsLib.id, $scope.favsLib) < 0) return;
    }

    return docsLib;
}
});
angular.module('myModule').directive('tabDirective', function() {
return {
    scope: {
        display: '='
    },
    controller: "ModalController",
    restrict: 'AE',
    replace: true,
    link: function(scope, elm, attrs) {

    }
};


});

这是我想要的html：

<div ng-app="myModule" ng-controller="ModalController">
  <tabset>
    <tab heading="Documents">
      <tab-directive display="docsLib">  <input type="checkbox" ng-model="checkboxDoc">favourites
    <ul>
        <li ng-repeat="doc in docsLib | filter:favFilter">{{doc}}</li>
    </ul>
   </tab-directive>
    </tab>
    </tabset>
</div>

如果我将输入框放在选项卡集之外，则过滤器可以正常工作：

在标签集之外工作 - jsfiddle

点击复选框过滤结果正确。

但是将输入放在选项卡集中不起作用，因此 ui-bootstrap 可能存在问题。

有人有什么想法吗？谢谢。

4

1 回答 1

1

这不是关于 ui-bootstrap 的问题，而是关于范围界定的问题。

将复选框放置在 tabstrip 中时，checkboxDoc属性放置在内部范围（由 tabstrip 指令创建的范围）。但是，用于过滤列表的属性位于外部范围（控制器范围）。

快速而肮脏的解决方法是将复选框放在标签条内，但将模型更改为ng-model="$parent.checkboxDoc".

正确的方法是，不要将原语放在范围内，而是放在对象上。所以不要使用$scope.checkboxDoc = false，分配$scope.checkboxDoc = {checked: false);。您可以通过分配正确地读取/写入父/外部/控制器范围属性<input type="checkbox" ng-model="checkboxDoc.checked">

见你纠正小提琴：http: //jsfiddle.net/xm1q9on9/14/

我曾经在某处读到，该ng-model属性应始终包含至少一个点，例如object.property. 这个助记符有助于永远不要将原始属性直接分配给范围对象，并且可以修复该问题。在官方 Angular 文档中阅读有关范围界定的更多信息，或者在angularJS Wiki中了解更多详细信息。

于 2015-09-30T14:02:30.790 回答