AngularJS를 사용하여 옵션 텍스트 값을 얻는 방법

AngularJS를 사용하여 옵션 텍스트 값을 얻는 방법

Angular를 사용하여 옵션 목록의 텍스트 값을 가져오려고 합니다.JS

여기 제 코드 조각이 있습니다.

<div class="container-fluid">
        Sort by:
        <select ng-model="productList">
            <option value="prod_1">Product 1</option>
            <option value="prod_2">Product 2</option>
        </select>
</div>

<p>Ordered by: {{productList}}</p>

{{productList}}옵션 값(예: prod_1)을 반환합니다.텍스트 값 'Product 1'을 얻으려고 합니다.방법이 있을까요?

가장 좋은 방법은,ng-options에 대한 지시.select요소.

컨트롤러

function Ctrl($scope) {
  // sort options
  $scope.products = [{
    value: 'prod_1',
    label: 'Product 1'
  }, {
    value: 'prod_2',
    label: 'Product 2'
  }];   
}

HTML

<select ng-model="selected_product" 
        ng-options="product as product.label for product in products">           
</select>

그러면 선택한 항목이 바인딩됩니다.product에 반대하다ng-model속성 -selected_product그 후 다음을 사용할 수 있습니다.

<p>Ordered by: {{selected_product.label}}</p>

jsFiddle : http://jsfiddle.net/bmleite/2qfSB/

대신ng-options="product as product.label for product in products">select 요소에서는 다음 항목도 사용할 수 있습니다.

<option ng-repeat="product in products" value="{{product.label}}">{{product.label}}

그것도 잘 작동하죠.

또, 다음과 같이 할 수 있습니다.

<select class="form-control postType" ng-model="selectedProd">
    <option ng-repeat="product in productList" value="{{product}}">{{product.name}}</option>
</select>

여기서 "selected Prod"가 선택됩니다.

<div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select name="repeatSelect" id="repeatSelect" ng-model="data.model">
      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
    </select>
  </form>
  <hr>
  <tt>model = {{data.model}}</tt><br/>
</div>

AngularJS:

angular.module('ngrepeatSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.data = {
    model: null,
    availableOptions: [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ]
   };
}]);

Angular에서 가져온JS 문서

언급URL : https://stackoverflow.com/questions/14552976/how-to-get-option-text-value-using-angularjs