모델에 숫자를 사용하는 Angularjs ng-옵션에서 초기 값을 선택하지 않음

모델에 숫자를 사용하는 Angularjs ng-옵션에서 초기 값을 선택하지 않음

ng-options를 사용하여<select>숫자 정수 값을 대응하는 옵션 목록에 바인딩합니다.컨트롤러에는 다음과 같은 기능이 있습니다.

myApp.controller('MyCtrl', function() {
    var self = this;

    var unitOptionsFromServer = {
        2: "mA",
        3: "A",
        4: "mV",
        5: "V",
        6: "W",
        7: "kW"
    };

    self.unitsOptions = Object.keys(unitOptionsFromServer).map(function (key) {
        return { id: key, text: unitOptionsFromServer[key] };
    });

    self.selectedUnitOrdinal = 4; // Assume this value came from the server.
});

HTML:

<div ng-controller="MyCtrl as ctrl">
    <div>selectedUnitOrdinal: {{ctrl.selectedUnitOrdinal}}</div>
    <select ng-model="ctrl.selectedUnitOrdinal" ng-options="unit.id as unit.text for unit in ctrl.unitsOptions"></select>
</div>

이 문제에 대한 jsFiddle의 설명과 제가 취했지만 마음에 들지 않는 다른 접근법이 있습니다.

이 예에서는 select 옵션이 "mV" 대신 빈 값으로 초기화됩니다.다른 선택사항(selectedUnitOrdinal updates)을 선택하면 바인딩이 제대로 작동하는 것 같습니다.

초기 모델 값을 숫자가 아닌 문자열로 설정하면 초기 선택이 작동한다는 것을 알게 되었습니다(바이올린 #3 참조).

숫자 옵션 값으로 ng-options를 재생하고 싶습니다.어떻게 하면 우아하게 해낼 수 있을까요?

Angular의 문서:ng-selectdirective는 이 문제를 해결하는 방법을 설명합니다.https://code.angularjs.org/1.4.7/docs/api/ng/directive/select (마지막 섹션)를 참조해 주세요.

작성할 수 있습니다.convert-to-number디렉티브를 지정하여 선택 태그에 적용합니다.

JS:

module.directive('convertToNumber', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(val) {
        return val != null ? parseInt(val, 10) : null;
      });
      ngModel.$formatters.push(function(val) {
        return val != null ? '' + val : null;
      });
    }
  };
});

HTML:

<select ng-model="model.id" convert-to-number>
  <option value="0">Zero</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

주의: 문서의 지시는 null을 처리하지 않기 때문에 조금 수정해야 했습니다.

조금 지저분할 수도 있지만, ng-options에서 특별한 기능이 없어도 결과를 얻을 수 있습니다.

<select ng-model="ctrl.selectedUnitOrdinal" ng-options="+(unit.id) as unit.text for unit in ctrl.unitsOptions"></select>

왜냐하면 unit.id을 얻으면 정수가 아닌 문자열이 반환되기 때문입니다.javascript 내의 오브젝트는 키를 문자열로 저장합니다.그래서 그것을 할 수 있는 유일한 방법은 인용문으로 4를 둘러싼 당신의 접근법이다.

편집

<select ng-model="ctrl.selectedUnitOrdinal" ng-options="convertToInt(unit.id) as unit.text for unit in ctrl.unitsOptions"></select>

$scope.convertToInt = function(id){
    return parseInt(id, 10);
};

필터를 정의할 수도 있습니다.number이 필터는 문자열 값을 int에 자동으로 해석합니다.

<select ng-model="ctrl.selectedUnitOrdinal" ng-options="unit.id|number as unit.text for unit in ctrl.unitsOptions"></select>


angular.module('filters').filter('number', [function() {
        return function(input) {
            return parseInt(input, 10);
        };
    }]);

Christophe의 앤스웨어를 추가하는 것만으로, 가장 쉬운 방법은 지시를 내리는 것입니다.

JS:

.directive('convertToNumber', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(val) {
        //saves integer to model null as null
        return val == null ? null : parseInt(val, 10);
      });
      ngModel.$formatters.push(function(val) {
        //return string for formatter and null as null
        return val == null ? null : '' + val ;
      });
    }
  };
});

Christophe의 앤스웨어는 "val?" 테스트에서 false를 반환하기 때문에 '0'에서는 올바르게 작동하지 않습니다.

ng-value Atribute를 사용할 수 있습니다.다음과 같이 합니다.

<select ng-model="model.id">
  <option ng-value="0">Zero</option>
  <option ng-value="1">One</option>
  <option ng-value="2">Two</option>
</select>

다른 솔루션들은 단순히 정수로서 값을 설정하기에는 너무 복잡하다고 생각합니다.다음을 사용합니다.

<select ng-model="model.id">
    <option ng-value="{{ 0 }}">Zero</option>
    <option ng-value="{{ 1 }}">One</option>
    <option ng-value="{{ 2 }}">Two</option>
</select>

Angular는 당신의id속성을 문자열로 지정하고 따옴표를 추가합니다.

self.selectedUnitOrdinal = "4";

Tyme와 매우 유사합니다.JV의 간단한 회피책은 기본 선택 번호를 다음과 같은 문자열로 변환하는 것입니다.

self.selectedUnitOrdinal = valueThatCameFromServer.toString();

이렇게 하면 숫자를 하드코드할 필요가 없고 수신된 값을 변환할 수 있습니다.필터나 지시 없이 쉽게 수정할 수 있습니다.

<select ng-model="ctrl.selectedUnitOrdinal" ng-options="+(unit.id) as unit.text for unit in ctrl.unitsOptions"></select>

unitsOptions에서 id 속성을 숫자로 만듭니다.

self.unitsOptions = Object.keys(unitOptionsFromServer).map(function (key) {
        return { id: +key, text: unitOptionsFromServer[key] };
    });

http://jsfiddle.net/htwc10nx/

Mathew Berg가 제공하는 솔루션은 작동하지만, 스팅 밸류 선택 옵션을 사용하는 다른 선택 항목은 실패할 수 있습니다.(저와 같이) 선택을 처리하기 위해 하나의 범용 지시문을 작성하려고 하면 문제가 될 수 있습니다.

적절한 회피책은 다음과 같이 값이 숫자(숫자를 포함하는 문자열인 경우에도)인지 확인하고 변환만 수행하는 것입니다.

angular.module('<module name>').filter('intToString', [function() {
        return function(key) {
            return (!isNaN(key)) ? parseInt(key) : key;
        };
    }]);

또는 컨트롤러 방식:

$scope.intToString = function(key) {
    return (!isNaN(key)) ? parseInt(key) : key;
};

언급URL : https://stackoverflow.com/questions/28114970/angularjs-ng-options-using-number-for-model-does-not-select-initial-value