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

因为角色是一个数组，所以你不能使用＆＃39; role.value＆＃39;。你必须这样访问它：

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

AngularJS过滤器问题

2 个答案: