Angular JS - How to update information on ng-repeat from controller?

Question

I have a select options and a couple of textareas inside an ng-repeat and what I would like to do is, when I select an option from the menu the respective set of textareas show up some information that belongs to what I just selected.

Instead of doing this all of the textareas created with the ng-repeat show the information.

Here's the link to a JSFiddle that may explain better the problem: https://jsfiddle.net/711yvm8g/5/

Here's the HTML code:

<div ng-app="App">
   <div ng-controller="Ctrl">
      <div ng-repeat="data in carData">
        <select ng-model = "carSelected" ng-change = "changeInfo(carSelected)" data-ng-options = "car as car.name for car in cars">
        <option value = "">Select car</option>
      </select>

      <textarea>{{colorData}}</textarea>
      <textarea>{{yearData}}</textarea>
  </div>

And here's the Javascript code:

angular.module('App', []);

function Ctrl($scope) {
    //This carData object was created only to make the ng-repeat show multiple instances of the fields.
    $scope.carData = {
        a:"abc",
        b:"def"
    }

    $scope.cars = [{
        name: "Volvo"
    }, {
        name: "Saab"
    }]

    var volvoInfo = {
        color:"Blue",
        year:"2016"
    }

    var saabInfo = {
        color:"Red",
        year:"2015"
    }

    $scope.changeInfo = function(carSelected) {
        if(carSelected.name == "Volvo") {
            $scope.colorData = volvoInfo.color;
            $scope.yearData = volvoInfo.year;
        } else {
            $scope.colorData = saabInfo.color;
            $scope.yearData = saabInfo.year;
        }
    }
}

Is there a way I can solve this issue? Thanks a lot.

you actually want the input boxes bound to their respective data object, rather than to $scope, so that there is one instance per repeat. however, this means that $scope.carData really needs to be an array of objects, not an object with strings as properties. — Claies
– Claies, Commented Dec 30, 2016 at 2:11

Hoyen · Accepted Answer · 2016-12-30 02:29:06Z

You should restructure your code to use arrays of objects. That way it is easier to manage.

angular.module('App', []);

function Ctrl($scope) {
  let carInfoModel = {
    name: '',
    color: '',
    year: '',
  }
  $scope.cars = [angular.copy(carInfoModel),angular.copy(carInfoModel)]

  $scope.carsInfo = [{
    name: 'Volvo',
    color: 'Blue',
    year: "2016"
  }, {
    name: 'Saab',
    color: 'Red',
    year: "2015"
  }]

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App">
  <div ng-controller="Ctrl">
    <div ng-repeat="data in cars">
      <select ng-model="data" data-ng-options="car as car.name for car in carsInfo">
        <option value="">Select car</option>
      </select>
      <textarea>{{data.color}}</textarea>
      <textarea>{{data.year}}</textarea>
    </div>
  </div>
</div>

Brian Ogden · Accepted Answer · 2016-12-30 01:30:01Z

0

Try Ctrl.colorData and Ctrl.yearData for your textarea bindings

answered Dec 30, 2016 at 1:30

Brian Ogden

19.3k11 gold badges107 silver badges186 bronze badges

Collectives™ on Stack Overflow

Angular JS - How to update information on ng-repeat from controller?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related