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选项的工作应该是物体的像这样的数组：

$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; 
}