AngularJs 将一个 fitler 表达式传递给最后带有 true 的指令答案

【问题标题】：AngularJs pass a fitler expression to directive with true at the endAngularJs 将一个 fitler 表达式传递给最后带有 true 的指令
【发布时间】：2017-05-18 15:55:03
【问题描述】：

我有一个名为 smDualList 的移动器列表指令。该指令具有以下模板（部分代码）：

<div>
                <select class="select-list" multiple
                        ng-model="unassigned"
                        name="unAssignedList"
                        data-no-dirty-check
                        ng-options="unassignedItem.descrip for unassignedItem in unassignedItems | orderBy:'descrip' | filter: filterCriteria"></select>
            </div>

这是我的页面标记：

<data-sm:duallist-directive ng-required="false" keep-pristine="true"
                                        unassigned-items-title="'@String.Format(Labels.availableX, Labels.items)'"
                                        unassigned-items="currentBenefit.unassignedItems"
                                        assigned-items-title="'@String.Format(Labels.assignedX, Labels.items)'"
                                        assigned-items="currentBenefit.assignedItems"
                                        sortable="false"
                                        filter-criteria="{'categoryId':selectedCategoryId}"
                                        selected-item="currentBenefit.selectedItem">
            </data-sm:duallist-directive>

directive.js 文件的代码如下：

 restrict: 'E',
            templateUrl: 'app/templates/smDuallist',
            require: ['^form'],
            scope: {
                assignedItems: '=assignedItems',
                unassignedItems: '=unassignedItems',
                assignedItemsTitle: '=',
                unassignedItemsTitle: '=',
                filterCriteria: '=',
                sortable: '=sortable',
                selectedItem: '=?',
                keepPristine: '=?'
            },
            link: function (scope, element, attrs, ctrls) {
                scope.form = ctrls[0];
                if (!scope.keepPristine)
                    scope.keepPristine = false;                
            }

所以，问题是我需要在 filter-criteria 表达式的末尾添加一个 true 参数，所以它会读作

filter-criteria="{'myColumn': myScopeProperty}:true"

不幸的是，当我尝试将它完全像这样放在表单上时，我得到了一个错误。

可能有办法以某种方式在指令 JavaScript 代码中添加该 true 参数吗？

最后一个参数来自以下讨论： Angular filter exactly on object key

我可能可以创建一个过滤器函数，但我如何创建它以使其足够通用以知道要使用哪个属性？因为我的表单中有几个移动器，我不想在控制器中为每个移动器创建一个函数。

【问题讨论】：

您收到的错误信息是什么？
angular.js:13920 [错误：[$parse:syntax] 语法错误：令牌“：”是表达式 [{'categoryId':selectedCategoryId}:true] 的第 34 列的意外令牌从 [:true] 开始。]

标签： javascript html angularjs angularjs-directive

【解决方案1】：

只需在您的过滤条件后面写上:true。如果需要灵活，可以将true也定义为变量。样本

例子：

var myApp=angular.module('myApp', []);

myApp.controller('Ctrl',function ($scope) {
  $scope.myfilter = {'id':  1};    
  $scope.excactfilter = true;
  $scope.users = [
{"id":1,"username":"simon",},
{"id":8,"username":"betty",},
{"id":14,"username":"archie",},
{"id":3,"username":"jumbo1"},
  ];     
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="Ctrl">
<div ng-repeat="user in users | filter:myfilter:excactfilter">
  <span>{{ user.username }}, {{ user.id }}</span>
</div>
  </div>
</body>

【讨论】：

我打算试试，但我有点担心。在很多情况下，我根本没有定义任何过滤条件。还能用吗？
似乎运作良好。和往常一样，我试图让事情变得过于复杂。谢谢，斯特凡
如果您将过滤器元素留空，您将获得所有结果，无论您是否定义精确。示例：过滤器：{}:true。谢谢