Angularjs: ng-model 업데이트 시 업데이트 안 함을 선택합니다.

Angularjs: ng-model 업데이트 시 업데이트 안 함을 선택합니다.

다음 예제를 작성했습니다.이 예에서는 무슨 일이 일어나고 있는지 정확하게 확인할 수 있습니다.http://jsfiddle.net/8t2Ln/101/

ng-options를 사용해도 같은 현상이 발생합니다.이렇게 하는 데는 다른 이유가 있지만, 예를 단순화해서 그 부분은 생략했습니다.

보시다시피 기본적으로 두 가지 옵션이 있습니다.선택 옆에 선택된 ng-model 값을 표시하여 확인할 수 있도록 합니다.상단 부분을 사용하여 세 번째 옵션을 추가하면 선택 옆에 표시되는ng-model 값으로 알 수 있듯이 새 옵션의 값으로 값이 설정됩니다.단, 선택 자체는 올바른 값을 표시하도록 변경되지 않습니다.

링크의 샘플코드를 다음에 나타냅니다.

var testApp = angular.module('testApp', ['ngRoute']);

testApp.controller('Ctrl', function ($scope) {

    $scope.newInput = '';
    $scope.inputDevice = [
        {
            value: '1',
            label: 'input1'
        },
        {
            value: '2',
            label: 'input2'
        }
    ];
    $scope.selectedDevice = '';

    $scope.addType = function () {
        var newElem = {
            label: $scope.newInput,
            value: '3'
        };
        $scope.inputDevice.push(newElem);
        $scope.selectedDevice = newElem.value;
    };


});

다음은 html입니다.

<div ng-app="testApp">
    <div ng-controller="Ctrl">
        <p>
            <input type="text" ng-model="newInput" />
            <br />
            <button ng-click="addType()">Add Type</button>
        </p>
        <select ng-model="selectedDevice">
            <option></option>
            <option ng-repeat="i in inputDevice" value="{{ i.value }}">{{ i.label }} - {{ i.value }}</option>
        </select>
        {{ selectedDevice }}</div>
</div>

이것이 바로 당신이 사용해서는 안 되는 이유입니다.ngRepeat선택 옵션을 렌더링합니다.를 사용해 주세요.ngOptions대신:

<select ng-model="selectedDevice" 
        ng-options="i.value as (i.label + '-' + i.value) for i in inputDevice">
    <option></option>
</select>

일반적으로 선택 옵션을 렌더링하기 위해 ngRepeat을 사용하지 마십시오.적어도 두 가지 좋은 이유가 있다. ngRepeat는 반복마다 개별 자 스코프를 만듭니다.옵션 태그의 경우는 필요하지 않습니다.또 하나의 중요한 경고는 다음과 같습니다.ngRepeatselect를 바인딩할 수 있는 것은 문자열과 같은 프리미티브뿐이지만 ngModel에 개체를 쓸 수 없습니다.

다음은 데모입니다.

angular.module('demo', []).controller('DemoController', function($scope) {

    $scope.newInput = '';
    $scope.inputDevice = [
    	{value: '1', label: 'input1'}, 
        {value: '2', label: 'input2'}
    ];
    
    $scope.selectedDevice = '';
    $scope.addType = function() {
        var newElem = {
            label: $scope.newInput,
            value: Number($scope.inputDevice[$scope.inputDevice.length - 1].value) + 1
        };
        $scope.inputDevice.push(newElem);
        $scope.selectedDevice = newElem.value;
        $scope.newInput = '';
    };

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<div ng-app="demo" ng-controller="DemoController">
    <form ng-submit="addType()">
        <input type="text" ng-model="newInput" />
        <button type="submit">Add Type</button>
    </form>
    <select ng-model="selectedDevice" ng-options="i.value as (i.label + ' - ' + i.value) for i in inputDevice">
        <option>Select</option>
    </select>
    {{ selectedDevice }}
</div>

문제는, 당신이 이 제품을 사용하지 않기 때문에ng-options브라우저는 새로 설정한 시점에서 렌더링을 완료하지 않았습니다.selectedDevice. 를 사용하고자 하는 경우ng-options이 회피책을 사용할 수 있습니다.사용하다$timeout싸다$scope.selectedDevice = newElem.value;브라우저가 다음 변경사항 렌더링을 완료한 후 실행되도록 합니다.ng-repeat.

또한 코드를 추가하여 연속적인 추가 시 다음 값을 증가시켰습니다. 왜냐하면 이 값을 '3'으로 하드코딩하면 추가 시에도 세 번째 옵션이 계속 선택되기 때문입니다.

var testApp = angular.module('testApp', ['ngRoute']);

testApp.controller('Ctrl', function($scope, $timeout) {

  $scope.newInput = '';
  $scope.inputDevice = [{
    value: '1',
    label: 'input1'
  }, {
    value: '2',
    label: 'input2'
  }];
  $scope.selectedDevice = '';

  $scope.addType = function() {
    var last = Number($scope.inputDevice[$scope.inputDevice.length - 1].value) + 1;
    var newElem = {
      label: $scope.newInput,
      value: last.toString()
    };
    $scope.inputDevice.push(newElem);
    $timeout(function() {
      $scope.selectedDevice = newElem.value;
    }, 0);
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>

<div ng-app="testApp">
  <div ng-controller="Ctrl">
    <p>
      <input type="text" ng-model="newInput" />
      <br />
      <button ng-click="addType()">Add Type</button>
    </p>
    <select ng-model="selectedDevice">
      <option></option>
      <option ng-repeat="i in inputDevice" value="{{ i.value }}" ng-selelected="{{ selectedDevice == i.value }}">{{ i.label }} - {{ i.value }}</option>
    </select>
    {{ selectedDevice }}
  </div>
</div>

비슷한 문제가 있었습니다.그 이유는 키가 숫자인데 다른 값을 설정하려고 할 때 문자열을 전송하고 있었습니다.이 경우의 회피책은 모델값을 키와 같은 타입으로 설정하는 것입니다.

예:

<select ng-model="model" ng-options="option.{{ key }} as option.{{ label }} for option in options">
    <option value="">{{ emptyLabel }}</option>
</select>

if (scope.options.length > 0) {
    scope.keyType = typeof(scope.options[0][scope.key]);
}

...

if (scope.keyType == 'number') {
    scope.model = parseInt(newVal, 10);
} else {
    scope.model = newVal;
} 

ng-model 업데이트 시 select not update라는 동일한 문제가 있었습니다.키와 값의 쌍을 기반으로 어레이에서 객체를 추출하는 함수에서 ng-model 값을 검색하고 있었습니다.

속성인 ""를 있었습니다.$$hashKey: "object:115"

이 문제는 angular.copy를 사용하여 오브젝트의 복사본을 만들 때 발생했으며, 이 "해시키" 속성은 삭제되어 선택되지 않았습니다.

코드를 재구성한 후 angular.copy 뒤에 ng-model 값을 얻기 위해 문제가 해결되었습니다.

ConstructorReviewers: function (oItem) {
      this.PERSON_ID = oItem.PERSON_ID;
      this.CHAIR_PERSON = oItem.CHAIR_PERSON;

      /* // Commented this part and added it to EditItem function      
      this.oDepartment = CommonFactory.FindItemInArray(vm.oCommittee.arrDepartments, 'NAME', this.DEPARTMENT, 'item');
      */    
      this.EditItem = function () {
           vm.EditItemOriginal = this;
           angular.copy(this, vm.EditItem); // After this update the ng-model into vm.EditItem.oTitle object
           vm.EditItem.oTitle = CommonFactory.FindItemInArray(vm.oCommittee.arrTitles, 'TITLE', vm.EditItem.TITLE, 'item');
           vm.Popup.ShowPopup(true, 'new_edit', Constants.Mentoring.Popup.Edit);
      }
}

저도 같은 문제가 있었어요.제가 해결한 건 번호를 문자열로 변환하는 거예요예:

$scope.selectedDevice = "" + newElem.value; 

언급URL : https://stackoverflow.com/questions/26211573/angularjs-select-not-updating-when-ng-model-is-updated