programing

ng-select는 문자열만 제공하지만 정수를 원합니다.

stoneblock 2023. 3. 5. 09:25

ng-select는 문자열만 제공하지만 정수를 원합니다.

이것은 나의 각진 html 파일 코드입니다.mongo 데이터베이스에frequencyType로 추가된.frequencyType = "1", 하지만 나는frequencyType = NumberInt(1);

<div class="span4">
  <select class="span12 combobox" ng-model="frequencyType" required>
    <option value="1">Daily</option>
    <option value="2">Weekly</option>
    <option value="3">Monthly</option>
    <option value="4">Yearly</option>
  </select>
</div>

내 데이터베이스에 저장frequencyType = "1"하지만 나는 원한다frequencyType = NumberInt(1).

더 쉬운 방법이 있습니다.

그냥 사용하다value*1값을 변경하지 않고 문자열을 int로 변환합니다.id가 정수라고 가정합니다.

그 결과 >

<div ng-app ng-controller="MyCtrl">
    <select ng-model="selectedItem" ng-options="selectedItem*1 as selectedItem for selectedItem in values"></select>
    selectedItem: {{selectedItem}}
</div>

indexOf는 개체에서는 사용할 수 없고 어레이에서만 사용할 수 있으므로 더 많은 경우에 사용할 수 있습니다.이 솔루션은 정수를 키로 하는 개체(예를 들어 일부 키가 없거나 db ID를 사용하는 경우)에 대해 작동합니다.

여기서 설명하는 대부분의 솔루션에서는 스태틱 대신 ngOptions 디렉티브를 사용해야 합니다.<option>OP 코드의 경우와 마찬가지로 HTML 코드의 요소.

각도 1.6.x

편집 Angular 1.6.x를 사용하는 경우 ng-value 지시어를 사용하면 예상대로 작동합니다.

angular.module('nonStringSelect', [])
.run(function($rootScope) {
  $rootScope.model = { id: 2 };
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<div ng-app="nonStringSelect">
  <select ng-model="model.id">
    <option ng-value="0">Zero</option>
    <option ng-value="1">One</option>
    <option ng-value="2">Two</option>
  </select>
  
  {{ model }}
</div>

이전 버전

정적 요소를 사용하면서 작동시킬 수 있는 방법이 있습니다.Angular에 표시되어 있습니다.JS 지시 문서를 선택합니다.

모델에 파서와 포메터를 등록하기 위한 명령을 사용하는 것입니다.항목이 선택되면 파서가 문자열-int 변환을 수행하고 모델이 변경되면 포맷터가 int-to-string 변환을 수행합니다.

아래 코드(Angular에서 직접 인용)JS 문서 페이지, 크레딧은 내 것이 아닙니다.)

https://code.angularjs.org/1.4.6/docs/api/ng/directive/select#binding-select-to-a-non-string-value-via-ngmodel-parsing-formatting

angular.module('nonStringSelect', [])
.run(function($rootScope) {
  $rootScope.model = { id: 2 };
})
.directive('convertToNumber', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(val) {
        return parseInt(val, 10);
      });
      ngModel.$formatters.push(function(val) {
        return '' + val;
      });
    }
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="nonStringSelect">
  <select ng-model="model.id" convert-to-number>
    <option value="0">Zero</option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  
  {{ model }}
</div>

나도 방금 같은 문제를 겪었고 이것을 하는 올바른 방법을 알아냈다 - 마법은 필요 없다.:)

function MyCtrl($scope) {
    $scope.values = [
        {name : "Daily", id : 1},
        {name : "Weekly", id : 2},
        {name : "Monthly", id : 3},
        {name : "Yearly", id : 4}];
    $scope.selectedItem = $scope.values[0].id;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
    <select ng-model="selectedItem" ng-options="selectedItem.id as selectedItem.name for selectedItem in values"></select>
    selectedItem: {{selectedItem}}
</div>

이를 위한 각진 방법은 선택 태그에서 "숫자로 변환" 명령을 사용하는 것이라고 생각합니다.

<select class="span12 combobox" ng-model="frequencyType" required convert-to-number>
    <option value="1">Daily</option>
    <option value="2">Weekly</option>
    <option value="3">Monthly</option>
    <option value="4">Yearly</option>
</select>

이 페이지의 마지막에 메뉴얼과 바이올린을 보실 수 있습니다.

나는 당신이 그것을 이용해 볼 것을 추천합니다.indexOf.

JS

function MyCtrl($scope) {
    $scope.values = ["Daily","Weekly","Monthly","Yearly"];
    $scope.selectedItem = 0;
}

HTML

<div ng-app ng-controller="MyCtrl">
    <select ng-model="selectedItem" ng-options="values.indexOf(selectedItem) as selectedItem for selectedItem in values"></select>
    selectedItem: {{selectedItem}}
</div>

데모

mongoDB로 전송$scope.selectedItem가치

지금까지 찾은 방법 중 가장 간단합니다.

function Controller($scope) {
    $scope.options = {
        "First option" : 1,
        "Second option" : 2,
        "Last option" : 10
    }
    $scope.myoption = 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="Controller">    
    <select ng-model="myoption" ng-options="label for (label, value) in options"></select>
    Option Selected: {{myoption}}
</div>

또는 숫자 인덱스를 사용하는 경우:

function Controller($scope) {
    $scope.options = {
        1 : "First option",
        2 : "Second option",
        10 : "Last option"
    }
    $scope.myoption = 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="Controller">    
    <select ng-model="myoption" ng-options="value*1 as label for (value, label) in options"></select>
    Option Selected: {{myoption}}
</div>

앵귤러 2의 경우, 광신도들을 따라가면...

언급URL : https://stackoverflow.com/questions/19809717/ng-select-gives-only-string-but-i-want-an-integer