AngularJS 过滤器问题

Question

所以我的应用程序获得了Primary Resources 的列表。这些 JSON 对象包含一个 ID、Name 和一个 role 对象数组。每个role 对象都有一个value 和name。当用户从选择标签中选择Primary Resource 时，我需要另一个选择标签来填充他们的role 值，因为一些Primary Resources 有多个roles。看起来是对的，但显然有问题。

HTML：

<div ng-controller="NewTicketCtrl">
   <div class="form-group col-xs-4">
        <div class="input-group">
              <label for="primaryResource"><i class="fa fa-user fa-lg"></i> Primary Resource</label>
        </div>
        <select class="form-control" id="primary" ng-model="option.primary" ng-options="primary.id as primary.name for primary in primaryResources">
        </select>
   </div>
   <div class="form-group col-xs-4">
        <div class="input-group">
             <label for="role"><i class="fa fa-briefcase fa-lg"></i> Role</label>
        </div>
        <select class="form-control" id="role" ng-model="option.role" ng-options="primary.role.value as primary.role.name for primary in primaryResources | filter:{primary:option.primary}">
        </select>
   </div>
</div>

控制器：

app.controller('NewTicketCtrl', ['$scope', '$http', function($scope, $http){
    //Gets data from a JSON file
    $http.get('res/formValues.json').success(function(data){

        $scope.formValues = data;

        //For simplicity purposes, I'm hard coding in the values 
        $scope.primaryResources = {
        "id" : 1,
        "name" : "Smith, John",
        "role" : [
            {
                "value" : 1,
                "name" : "Technician"
            },
            {
                "value" : 5,
                "name" : "Administration"
            }
        ]
    },
    {
        "id" : 2,
        "name" : "Smith, Jane",
        "role" : [
            {
                "value" : 1,
                "name" : "Technician"
            },
            {
                "value" : 2,
                "name" : "Level 2 Technician"
            },
            {
                "value" : 3,
                "name" : "Level 3 Technician"
            }
        ]
    }

        //Used to store values for later use
        $scope.option = {
            status : $scope.formValues.status[0].value,
            priority : $scope.formValues.priority[0].value,
            ticketType : $scope.formValues.ticketType[0].value,
            workQueue : $scope.formValues.workQueue[0].value,
            primary : $scope.formValues.primaryResource[0].id,
            role : $scope.formValues.primaryResource[0].role[0].value
        };

    }).error(function(data){
        console.log(data);
    });
}]);

Answer 1

我不确定我是否完全理解了您的问题，但如果我忽略了 formValues 变量，这里有一个简化的plunker，说明如何使用多个选择标签。

<div ng-controller="NewTicketCtrl">
 <div class="form-group col-xs-4">
      <div class="input-group">
            <label for="primaryResource"><i class="fa fa-user fa-lg"></i> Primary Resource</label>
      </div>
      {{selectedPrimaryResource}}
      <select class="form-control" id="primary" ng-model="selectedPrimaryResource" ng-options="primary as primary.name for primary in primaryResources">
      </select>
 </div>
 <div class="form-group col-xs-4">
      <div class="input-group">
           <label for="role"><i class="fa fa-briefcase fa-lg"></i> Role</label>
      </div>
      <select class="form-control" id="role" ng-model="selectedRole" ng-options="role as role.name for role in selectedPrimaryResource.role">
      </select>
      {{selectedRole}}
 </div>
</div>

简而言之，只需将第一个选择的结果存储为一个对象，然后将该对象用于第二个选择标记。

Answer 2

您的 $scope.primaryResourses 是一个对象，但看起来您希望它是一个数组。

要使 ng-options 起作用，它应该是一个对象数组，如下所示：

$scope.primaryResources = [
    {
        "id": 1,
        "name": "Smith, John",
        "role": [
            { "value" : 1, "name" : "Technician" },
            { "value" : 5, "name" : "Administration" }]
    },
    {
        "id" : 2,
        "name" : "Smith, Jane",
        "role" : [
            { "value" : 1, "name" : "Technician" },
            { "value" : 2, "name" : "Level 2 Technician" },
            { "value" : 3, "name" : "Level 3 Technician" }]
    }];

因为角色是一个数组，所以不能使用“role.value”。您必须像这样访问它：

role[0].value or role[i].value   // with an index

但我不认为这就是你想要的 - 我认为你想用相应的角色填充第二个数组。

可以这样做：

HTML：

<div>
    <div class="form-group col-xs-4">
        <div class="input-group">
              <label for="primaryResource"><i class="fa fa-user fa-lg"></i> Primary Resource</label>
        </div>
        <select class="form-control" id="primary" ng-model="option.primary" ng-change="setRoles(option.primary)" ng-options="primary.id as primary.name for primary in primaryResources">
        </select>
    </div>
    <div class="form-group col-xs-4">
        <div class="input-group">
             <label for="role"><i class="fa fa-briefcase fa-lg"></i> Role</label>
        </div>
        <select class="form-control" id="role" ng-model="option.role" ng-options="selected.value as selected.name for selected in RowOptions">
        </select>
    </div>
</div>

控制器：

$scope.setRoles = function(id) {
    $scope.RowOptions = $scope.primaryResources.filter(function(data) { 
        return data.id == id; })[0].role;
}