ng-repeat에서 ng-model을 사용할 때 많은 문제가 있습니다. 바인딩된 데이터 내용을 얻을 수 없는 경우도 있고, 바인딩된 데이터 내용이 변경되면 루프에서 생성된 모든 내용이 변경되는 경우도 있습니다. 함께. . 저도 개발중에 위와 같은 문제가 발생했는데, 해결 후 복구가 되지 않자, 구할 수 없는 상황에 대해 간략하게만 간략하게 소개해 보도록 하겠습니다.
예:
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>
변경 버튼을 클릭하면 현재 선택된 데이터 내용을 가져오고 싶은데, 이때 이렇게 작성해야만 정의되지 않은 것을 얻을 수 있다는 것을 알게 될 것입니다. 각 선택 사항을 저장하는 Key: value 메소드를 통해 p를 객체에 할당할 수 있다고 제안합니다
$scope.p={};
정말 문제가 되지 않지만 새로운 문제가 발생합니다. 즉, 항목 하나를 변경하면 모든 내용이 함께 변경됩니다. 그렇다면 더 좋은 방법이 있을까요?
작은 변화
html:
<button ng-click="cs(p)">ceshi</button>
js:
$scope.cs=function(p){ console.log(p); }
이것은 단순한 예일 뿐이며, 실제 사용 중에 다른 문제점을 발견하면 댓글로 메시지를 남겨주세요.