CODEWITHSUNDEEP
javascriptangularjs
adifire
adifire

Reputation: 610

Adding property on each object from ng-repeat

I have a array of objects being fetched from an api and displayed on the page.

Now I want to a select dropdown for each object whose value is initially undefined, but is set to whatever value the user sets. On this user event, the object should reflect this change and it should also send an update request to the api for this new change. Here's what I have tried so far.

   <section class='results'>
    <p class='no-results' ng-show='!results.length && !loading'>No Results</p>

    <article class='result' ng-repeat='result in results track by $id(result)'>
      <h2><a href="{{result.docno}}">{{result.docno}}</a></h2>
      <select ng-options="grade for grade in [0,1,2]" ng-model="result.rank"></select>
      {{result.rank}}
      <!--<p></p>-->
    </article>
   </section>

Here results is the array and rank is the new property I want to add to each result object in results. What is the right way to update the result object each time the rank is changed?

Here is the snippet of the code in controller that populates the results array

$scope.loadResults = function(m) {
    results.search($scope.query, m, $scope.offset).then(function(a) {

        //Load results
        var i = 0;
        for(;i < a.hits.length; i++){
            var temp = a.hits[i];
            //temp['grade'] = undefined;
            $scope.results.push(temp);
        }

        ...
    });
};

I also tried to set a watch on 'result.rank' but it does not get invoked.

Upvotes: 1

Views: 545

Answers (1)

shaunhusain
shaunhusain

Reputation: 19748

Assuming {{result.rank}} shows the correct value after a new option is selected you can use ng-change on the select to know when the model was changed due to user interaction. You may also want to check out ng-model-options that allows you to setup a debounce/delay for triggering the change to the model when the user interacts with the control in case they quickly change their mind and you want to reduce the number of API calls.

Ex:

<select ng-change="updateAPI(result)"></select>

Upvotes: 2

Related Questions