Question

当我从$ watch

更新转发器正在使用的阵列时，我会遇到一些奇怪的行为

这是HTML

<section data-ng-controller="JobsController">
    <div class="page-header">
        <h1>New Job</h1>
    </div>
    <div class="col-md-12">
        <form class="form-horizontal" data-ng-submit="create()" novalidate>
            <fieldset>

                <div class="form-group" data-ng-controller="DisciplinesController" data-ng-init="find()">
                    <h3>Discipline</h3>
                    <div>

                 <!--clicking these will filter -->
                        <label class="form-control"  data-ng-repeat="discipline in disciplines">
                            <input type="checkbox" checklist-model="$parent.dl" checklist-value="discipline"> {{discipline.name}}
                        </label>
                    </div>
                </div>

                 <!--this is the updated list -->

                <div class="form-group">
                    <h3>Roles</h3>
                    <div>
                        <label class="form-control"  data-ng-repeat="role in selectedDisciplineRoles">
                            <input type="checkbox" checklist-model="roleList" checklist-value="role"> {{role.name}}
                        </label>
                    </div>

                </div>


                <div class="form-group">
                    <h3>What "Job" are they trying to do?</h3>
                    <label class="control-label" for="name">Name</label>
                    <div class="controls">
                        <input type="text" data-ng-model="name" id="name" class="form-control" placeholder="Name" required>
                    </div>
                </div>
                <div class="form-group">
                    <input type="submit" class="btn btn-default">
                </div>
                <div data-ng-show="error" class="text-danger">
                    <strong data-ng-bind="error"></strong>
                </div>
            </fieldset>
        </form>
    </div>
</section>

我要做的是在服务器上安装此模型过滤器并使用适当的值更新客户端

'use strict';

// Jobs controller
angular.module('jobs').controller('JobsController', ['$scope', '$stateParams', '$location', 'Authentication', 'Jobs', 'RolesAPI',
    function($scope, $stateParams, $location, Authentication, Jobs, RolesAPI) {
        $scope.authentication = Authentication;

        $scope.$watchCollection("dl", function(){
            var activeDisciplineIds = _.pluck($scope.dl, "_id");
            $scope.selectedDisciplineRoles = [];

            RolesAPI.getByDisciplineIds(activeDisciplineIds)
                .success(function(data){

                    $scope.selectedDisciplineRoles = data;

                    console.log($scope.selectedDisciplineRoles)

                }
           );
        });

    }
]);

我在返回时看不到任何重复项，但是当我点击复选框时，会快速复制所有活动结果，然后重复项就会消失。

我愿意创建一个angualar过滤器，但无法使其正常工作。这是我正在处理的数据。

[
{
_id: "547d2ad8b62d3f8bfaf139f8",
user: {
_id: "547648f95413b30000a03e21"
},
base: "547956b0824679a54c9142d2",
__v: 0,
created: "2014-12-02T02:58:32.422Z",
disciplines: [
"5476625147bd3200004bae00"
],
name: "item 1"
},
{
_id: "547d0012b62d3f8bfaf139f7",
user: {
_id: "547648f95413b30000a03e21"
},
base: "547956a6824679a54c9142d1",
__v: 0,
created: "2014-12-01T23:56:02.427Z",
disciplines: [
"5476616347bd3200004badfb",
"547661cb47bd3200004badfd"
],
name: "item 2"
},
{
_id: "547cfea6b62d3f8bfaf139f6",
user: {
_id: "547648f95413b30000a03e21"
},
base: "547956a6824679a54c9142d1",
__v: 0,
created: "2014-12-01T23:49:58.885Z",
disciplines: [
"547661cb47bd3200004badfd",
"5476616347bd3200004badfb"
],
name: "item 3"
}
]

过滤需要基于id数组的匹配以及对象的disciplines数组中的匹配。

类似

["5476616347bd3200004badfb", "547661cb47bd3200004badfd"]

将返回第1项和第3项，而不是第2项

Answer 1

我最终让过滤器像这样工作。

'use strict';

angular.module('roles').filter('rolesByDiscipline', [
    function() {
        return function(roles, disciplineIds) {
            return roles.filter(function(role) {

                for (var i in role.disciplines) {

                    if (_.pluck(disciplineIds, "_id").indexOf(role.disciplines[i]) != -1) {
                        return true;
                    }
                }return false;

            });
        };
    }
]);

HTML

<div class="form-group" data-ng-controller="RolesController" data-ng-init="find()">
    <h3>Roles</h3>
    <div>
        <label class="form-control"  data-ng-repeat="role in roles |  rolesByDiscipline:$parent.dl">
             <input type="checkbox" checklist-model="roleList" checklist-value="role"> {{role.name}}
        </label>
     </div>
</div>

角度转发器中的奇数重复

1 个答案: