search

Home >Web Front-end >JS Tutorial >Problems encountered by angularjs when using ng-model in ng-repeat_AngularJS

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

WBOY
WBOYOriginal
2016-05-16 15:19:051239browse

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>

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>

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={};

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>

js:

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

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：angularjs custom attributes of ng-model tag_AngularJSNext article：angularjs custom attributes of ng-model tag_AngularJS

Related articles

See more