Problems encountered by angularjs when using ng-model in ng-repeat

Problems encountered by angularjs when using ng-model in ng-repeat_AngularJS

WBOY

Release： 2016-05-16 15:19:05

Original

1210 people have browsed it

There are many problems when using ng-model in ng-repeat. Some people encounter that they cannot obtain the bound data content, and some people encounter that when the bound data content is changed, all the content generated by the loop changes together. . I also encountered the above problem during development, but after solving it, I couldn't restore the situation. I can only briefly introduce how to solve the situation where it cannot be obtained.

For example:

html:

<body>
<div ng-controller="selectController">
  <div ng-repeat="pop in citylist">
    <select ng-model="p">
      <option value="" style="display:none;">{{pop.pop}}</option>
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
    </select>
    <button ng-click="cs()">ceshi</button>
  </div>
</div>
</body>

Copy after login

js:

<script>
  var app = angular.module('app', []);
  app.controller('selectController', function ($scope) {
    $scope.citylist=[{id:1,pop:"北京"},{id:1,pop:"上海"},{id:1,pop:"广州"}];
    $scope.cs=function(){
      console.log($scope.p);
    }
  })
</script>

Copy after login

It is a very simple function. You want to get the currently selected data content of select when you click the change button, but you will find that you can only get undefined by writing this way. At this time, some people will propose that p can be assigned to an object, through Key: value method to save each selection

$scope.p={};

Copy after login

This is indeed no problem, but there will be a new problem, that is, as long as one item is changed, all the content will be changed together. So is there a better way?

Just a small change

html:

<button ng-click="cs(p)">ceshi</button>

Copy after login

js:

 $scope.cs=function(p){
      console.log(p);
    }

Copy after login

This is just a simple example. If you find any other problems during actual use, you can leave a message in the comments.

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Problems encountered by angularjs when using ng-model in ng-repeat_AngularJS