When using Ng-model in Ng-repeat, there are many problems, some people encounter can not get the binding data content, some people encounter changes bound data content when the content of all loops generated changes. The above problem I also encountered in the development, but after the solution I did not restore that kind of situation, can only briefly introduce the situation can not get how to solve.
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= "Beijing" > Beijing </option>
<option value= "Shanghai" > Shanghai </option>
<option value= "guangzhou" > Guangzhou </option>
</select>
<button ng-click= "CS () ">ceshi</button>
</div>
</div>
</body>
Js:
<script>
var app = Angular.module (' app ', []);
App.controller (' Selectcontroller ', function ($scope) {
$scope. Citylist=[{id:1,pop: "Beijing"},{id:1,pop: "Shanghai"},{id:1 , pop: "Guangzhou"};
$scope. Cs=function () {
console.log ($scope. p);
}
})
</script>
Very simple function, want to click on the Change button to get select the currently selected data content, but you will find that writing can only get undefined, at this time some people will be able to give p as an object, through the Key:value way to save each time the choice
$scope. p={};
That's fine, but there's a new problem: If you change one, then all the content will be changed together, so is there a better way?
Just a little change.
Html:
<button ng-click= "CS (p)" >ceshi</button>
Js:
$scope. Cs=function (p) {
console.log (p);
}
This is just a simple example, if you find any problems when you actually use them, you can leave a message in the comments.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
