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