Unable to update a given item in an array from Angularjs controller

Question

I am having a requirement to create a search query of parameters and send it to server. I have created the drop downs from where the user will populate the values. Below is the code on the UI:

              <div ng-repeat="criteria in criterias">
                <div class="m-b">
                  <div class="form-group s-b" style="width: 150px;">
                    <span>classification</span>
                    <select  ng-model="criteria.selectedClassification" class="form-control" id="classification" ng-options="classification for classification in classification" ng-change="handleClassification(criteria)" style="max-width:100%"></select>
                  </div>
                  <div class="form-group s-b" style="width: 150px;">
                    <span>Config</span>
                    <select id="config" ng-model="criteria.selectedConfig" ng-options="config for config in config" class="form-control" ng-change="handleConfig(criteria)" style="max-width:100%" ></select>
                  </div>
                  <div class="form-group s-b" style="width: 150px;">
                    <span>Attribute</span>
                    <select id="attribute" class="form-control" ng-options="attribute for attribute in attributes"  ng-model="criteria.selectedAttribute" style="max-width:100%;" ng-change="handleAttrChange(criteria  )"></select>
                  </div>
                  <div class="form-group s-b" style="width: 150px;">
                    <span>Predicate</span>
                    <select class="form-control" ng-model="criteria.predicate"  style="max-width:100%">
                      <option value="matches">Matches</option>
                      <option value="not-matches">Not Matches</option>
                    </select>
                  </div>
                  <div class="form-group s-b" style="width: 100px;">
                    <span>Value</span>
                    <select class="form-control" name="account" ng-model="criteria.value" ng-options="item for item in values" style="max-width:100%">
                    </select>
                  </div>
                  <div class="form-group s-b" style="margin-top: 20px;">
                    <span>
                    <button class="btn btn-sm btn-primary pad-btn" type="submit" ng-click="addCriteria()"><i class="fa fa-plus"></i>
                    </button>
                    <button class="btn btn-sm btn-danger pad-btn" type="submit" ng-click="deleteCriteria(criteria)"><i
                            class="fa fa-minus"></i></button>
                    </span>
                  </div>
                </div>
              </div>

I have wrapped the code inside a repeat so that the user can create multiple criteria (each having one filter condition). The user can create criteria by clicking on the + icon. I am facing issues when working with one criteria, any update done on the config is setting the attributes of all the criteia instead of the current criteria.

I have created a working plunker to demo this. Please let me know where I am going wrong.

Link to Plunker - Link to Plunker

Mike D · Accepted Answer · 2016-01-08 02:32:41Z

0

The issue is your list of attributes. Whenever you are changing the config, you are calling a function that is changing the list of attributes. Each row of criteria is looking at the same attributes array. So if you change the config in the first and the third row, they are both affecting what attributes is set to, so it's filtering the array twice.

To avoid this, each of your rows should have an array of the lookups you're going to be filtering on. Then inside the function of the ng-change, filter the array that is in your current criteria, so that each row of criteria is using it's own lookup.

answered Jan 8, 2016 at 2:32

Mike D

1631 silver badge7 bronze badges

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

7 Comments

zilcuanu Over a year ago

Thanks for looking into this. Could you please post the edits or update the plunker for my benefit.

Mike D Over a year ago

Np, sure thing. So what I did was change the ng-options="attribute for attribute in attributes" to ng-options="attribute for attribute in attributes" Then in the controller, I added another property to criteria which is called attributes. I set this to $scope.attributes and I also set the attributes when pushing a new criteria object. I also took the code where you're setting the lookups and wrapped it in the function and set the initial criteria after that is done, so the attributes will load correctly. plnkr.co/edit/jL6t5ALSyfKjWvAzuSvp?p=preview

zilcuanu Over a year ago

Thanks. This really helped as ng-options was very confusing for me. One more issue is with the list of config array. For all the criteria, the config array is the same even if we changed the classification. The config array needs to update according to the classification selected. Where am I doing wrong for this issue.

Mike D Over a year ago

You'd have to do the same thing as you did with the attributes. Have the lookup as a part of each object and filter that. Leave the $scope.configs always the same as it is your source of truth of all the options. Also make sure you're using angular.copy() so it's not referencing the same object

zilcuanu Over a year ago

I am getting your approach. It would be great if you could update the plunkr since I need to know how you handle the angular.copy to update the local copy instead of the master copy so that I can update my other code of my application where I have the similar use case.

|

Collectives™ on Stack Overflow

Unable to update a given item in an array from Angularjs controller

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related