AngularJS Filter Problems

Question

SO my application gets a list of Primary Resources. These JSON objects contain an ID, the Name, and an array of role objects. Each role object has a value and name. When the user selects a the Primary Resource from a select tag, I need another select tag to populate with their role values, as some Primary Resources have multiple roles. It looks right to be, but clearly there is something wrong with it.

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>

Controller:

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

Kito · Accepted Answer · 2016-02-11 21:57:44Z

1

I'm not sure if I fully understood your question, but if I'm ignoring the formValues variable, here is a simplified plunker on how you can work with multiple select tags.

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

In short, simply store the result of your first selection as an object and use that object for the second selection tag.

edited Feb 11, 2016 at 21:57

answered Feb 11, 2016 at 21:32

Kito

1,3954 gold badges17 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CaptainQuint Over a year ago

Perfect, that was just what I needed. Thank you very much.

Nijeesh · Accepted Answer · 2016-02-11 21:55:42Z

Your $scope.primaryResourses is an object but it looks like you want it to be an array.

For ng-options to work it should be an array of objects like this:

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

Because role is an array you cant use 'role.value'. You would have to access it like this:

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

But I don't think that's what you want - I think you want to populate a second array with corresponding roles.

That can be done like this:

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>

Controller :

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

Collectives™ on Stack Overflow

AngularJS Filter Problems

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related