[javascript] AngularJS의 ng 옵션을 사용하여 선택 작업

ngOptions가 작동 하려면 ngModel이 필요 하다는 점에 주목 해야 합니다. ng-model="blah"“set $ scope.blah를 선택된 값으로 설정합니다.”

이 시도:

<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>

AngularJS의 문서에서 더 많은 내용을 볼 수 있습니다 (보지 못한 경우).

배열 데이터 소스의 경우 :

• 배열의 값 레이블
• 배열의 값 레이블로 선택
• 배열의 값에 대한 그룹 별 레이블 그룹 = 배열의 값에 대한 그룹 별 레이블 그룹으로 선택

객체 데이터 소스의 경우 :

• 객체에서 (key, value)에 대한 레이블
• 객체에서 (key, value) 레이블로 선택
• 객체의 (키, 값)에 대한 그룹 별 레이블 그룹화
• 객체의 (키, 값)에 대해 그룹별로 레이블 그룹으로 선택

AngularJS의 옵션 태그 값에 대한 설명은 다음과 같습니다.

당신이 사용하는 경우 ng-options, 옵션 태그의 값은 항상 옵션 태그에 관한 배열 항목의 인덱스가됩니다 겨-옵션에 의해 작성 . AngularJS는 실제로 기본 유형뿐만 아니라 선택 컨트롤을 사용하여 전체 객체를 선택할 수 있기 때문입니다. 예를 들면 다음과 같습니다.

app.controller('MainCtrl', function($scope) {
   $scope.items = [
     { id: 1, name: 'foo' },
     { id: 2, name: 'bar' },
     { id: 3, name: 'blah' }
   ];
});

<div ng-controller="MainCtrl">
   <select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
   <pre>{{selectedItem | json}}</pre>
</div>

위의 방법으로 전체 객체를 $scope.selectedItem직접 선택할 수 있습니다. 요점은 AngularJS를 사용하면 옵션 태그에 무엇이 있는지 걱정할 필요가 없다는 것입니다. AngularJS가 처리하도록하십시오. 스코프의 모델에있는 것만 신경 써야합니다.

위의 동작을 보여주고 작성된 HTML을 보여주는 플런저입니다.

기본 옵션 다루기 :

기본 옵션과 관련하여 위에서 언급하지 않은 몇 가지가 있습니다.

첫 번째 옵션을 선택하고 빈 옵션을 제거하십시오.

ng-init모델을 (에서 ng-model) 반복하는 항목의 첫 번째 요소로 설정 하는 단순 을 추가하여이를 수행 할 수 있습니다 ng-options.

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>

참고 : foo“거짓”으로 올바르게 초기화 되면 약간 미친 듯이 보일 수 있습니다. 이 경우 foo컨트롤러에서 초기화를 처리하고 싶을 것입니다.

기본 옵션 사용자 정의 :

이것은 조금 다릅니다. 여기서 빈 태그 속성으로 옵션 태그를 선택 항목의 하위 항목으로 추가하고 내부 텍스트를 사용자 정의하기 만하면됩니다.

<select ng-model="foo" ng-options="item as item.name for item in items">
   <option value="">Nothing selected</option>
</select>

참고 :이 경우 다른 옵션을 선택한 후에도 “빈”옵션이 그대로 유지됩니다. AngularJS에서 selects의 기본 동작에는 해당되지 않습니다.

선택 후 숨겨지는 사용자 정의 된 기본 옵션 :

값을 선택한 후 사용자 정의 된 기본 옵션을 제거하려면 ng-hide 속성을 기본 옵션에 추가 할 수 있습니다.

<select ng-model="foo" ng-options="item as item.name for item in items">
   <option value="" ng-if="foo">Select something to remove me.</option>
</select>

답변

[
{"code": "0", "name": "Select Make"},
{"code": "1", "name": "Acura"},
{"code": "2", "name": "Audi"}
]

angular.module('makeServices', ['ngResource']).
factory('Make', function($resource){
    return $resource('makes.json', {}, {
        query: {method:'GET', isArray:true}
    });
});

<div ng:controller="MakeModelCtrl">
  <div>Make</div>
  <select id="makeListBox"
      ng-model="make.selected"
      ng-options="make.code as make.name for make in makes"
      ng-change="makeChanged(make.selected)">
  </select>

  <div>Model</div>
  <select id="modelListBox"
     ng-disabled="makeNotSelected"
     ng-model="model.selected"
     ng-options="model.code as model.name for model in models">
  </select>
</div>

function MakeModelCtrl($scope)
{
    $scope.makeNotSelected = true;
    $scope.make = {selected: "0"};
    $scope.makes = Make.query({}, function (makes) {
         $scope.make = {selected: makes[0].code};
    });

    $scope.makeChanged = function(selectedMakeCode) {
        $scope.makeNotSelected = !selectedMakeCode;
        if ($scope.makeNotSelected)
        {
            $scope.model = {selected: "0"};
        }
    };

    $scope.models = [
      {code:"0", name:"Select Model"},
      {code:"1", name:"Model1"},
      {code:"2", name:"Model2"}
    ];
    $scope.model = {selected: "0"};
}

items =
[
   { key:"AD",value:"Andorra" }
,  { key:"AI",value:"Anguilla" }
,  { key:"AO",value:"Angola" }
 ...etc..
]

<select ng-model="countries" ng-options="item.key as item.value for item in items"></select>

<select ng-model="blah" ng-options="item.value for item in items track by item.key"></select>

<select name="test">
   <option ng-repeat="item in items" value="{{item.key}}">{{item.value}}</option>
</select>

<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>

#directive
app.directive('select2', ->
    templateUrl: 'partials/select.html'
    restrict: 'E'
    transclude: 1
    replace: 1
    scope:
        options: '='
        model: '='
    link: (scope, el, atr)->
        el.bind 'change', ->
            console.log this.value
            scope.model = parseInt(this.value)
            console.log scope
            scope.$apply()
)

<!-- HTML partial -->
<select>
  <option ng-repeat='o in options'
          value='{{$index}}' ng-bind='o'></option>
</select>

<!-- HTML usage -->
<select2 options='mnuOffline' model='offlinePage.toggle' ></select2>

<!-- Conclusion -->
<p>Sometimes it's much easier to create your own directive...</p>

<select ng-model="myVariable">
  <option ng-repeat="item in items"
          value="{{item.ID}}"
          title="Custom title: {{item.Title}} [{{item.ID}}]">
       {{item.Title}}
  </option>
</select>

<select class="form-control"
        ng-model="selectedOption"
        ng-options="option.name + ' (' + (option.price | currency:'USD$') + ')' for option in options">
</select>