집 >웹 프론트엔드 >JS 튜토리얼 >ng-repeat_AngularJS에서 ng-model을 사용할 때 anglejs에서 발생하는 문제

ng-repeat_AngularJS에서 ng-model을 사용할 때 anglejs에서 발생하는 문제

WBOY원래의: 2016-05-16 15:19:051237검색

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);
    }

이것은 단순한 예일 뿐이며, 실제 사용 중에 다른 문제점을 발견하면 댓글로 메시지를 남겨주세요.

성명：

이전 기사：ng-model tag_AngularJS의angularjs 사용자 정의 속성다음 기사：ng-model tag_AngularJS의angularjs 사용자 정의 속성

ng-repeat_AngularJS에서 ng-model을 사용할 때 anglejs에서 발생하는 문제

관련 기사