Question

我有一个下拉选择标记，如下所示：

         <select class="pull-right" id="editActionChargeSelect"
                ng-model="data.editAction.actionType1.actionChargeId"
                ng-change="addAnEditSelectionToModelCollection(data.editAction.actionType1.actionCharges, 'editActionChargeSelect')">
            <option value="{{actionCharge.id}}")
                ng-repeat="actionCharge in data.actionCharges | selectFilter:data.editAction.actionType1.actionCharges">
                {{actionCharge.displayValue}}
            </option>
        </select>

ng-repeat传递一个数组，data.actionCharges存储到我的selectFilter过滤器，如下所示：

angular.module("customFilters", [])
.filter("selectFilter", function () {
return function (data, modelCollection)
{
    var results = [];
    for (var i = 0; i < data.length; i++) {
        var inModelCollection = false;
        for (var j = 0; j < modelCollection.length; j++) {
            if (data[i].id == modelCollection[j].lookUpDetailId)
            {
                inModelCollection = true;
            }
        }
        if (!inModelCollection) {
            results.push(data[i])
        }
        //results.push(data[i]);
    }

    return results;
}

然后我在UI中有链接，用户可以在其中添加和删除data.actionCharges列表中的项目。选择将重新选择此选项并显示和消失选项以反映用户的选择。

唯一的问题是过滤器在加载时没有初始化。因此，如果列表开始出现空的情况很好。用户将看到他们的选择从下拉列表中删除并添加到UI表中。当他们从表中删除一行时，该选项将被添加回下拉菜单中，直到过滤器。

单击编辑按钮时会加载data.editAction模型：

    <a href="#" ng-click="getAction(action.id, 'edit')"
                               data-toggle="modal" data-target="#modalEditAction"
                               class="functionalLinks">
                                <i class="glyphicon glyphicon-pencil"></i>
                                EDIT
                            </a>

编辑按钮调用getAction来填充模型：

$scope.getAction = function (actionId, populateObject) {
            $http.get(actionUrl + '/' + actionId)
               .then(function (response) {
                   // Test front end exception message;
                   // throw "test exception";
                   switch (populateObject) {
                       case "details":
                           $scope.data.actionDetails = response.data;
                           break;
                       case "edit":

                           // populate editAction Object
                           $scope.data.editAction = response.data;

                           // sanitize dates for action type.
                           if (response.data.actionTypeId == 1) {
                               var actionEffectiveDate = undefined; // if you get null back from database, you'll keep this undefined
                               if (response.data.actionType1.actionEffectiveDate !== null) {
                                   // only make an actual date if there is something stored
                                   var actionEffectiveDate = new Date(response.data.actionType1.actionEffectiveDate);
                               }
                               $scope.sanitizedActionEffectiveDate = $filter('date')(actionEffectiveDate, "yyyy-MM-dd")

                               //$scope.disableSelectionsForEdit($scope.data.editAction.actionType1.actionsRecommendedByLer, "editActionRecommendedByLerSelect");
                               //$scope.disableSelectionsForEdit($scope.data.editAction.actionType1.actionCharges, "editActionChargeSelect");
                           }
                           break;
                   }
               })
               .catch(function (error) {
                   $scope.data.actionDetailsError = error;
               });
        }

但是当我点击按钮拉起记录时，如何让select通过过滤器反映模型。

如何使用过滤器将选择选项列表绑定到ng-repeat？

0 个答案: