Wie erhält man den Optionstext mit AngularJS?

Ich versuche, einen text mit dem Wert einer option aus Liste mithilfe von AngularJS

Hier ist mein code-snippet

<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}} gibt den Wert der option, zB: prod_1. Ich versuche, den text-Wert "Produkt 1". die Gibt es eine Möglichkeit, dies zu tun?

InformationsquelleAutor der Frage Adrian Gunawan | 2013-01-27

  1. 61

    Der beste Weg ist die Verwendung der ng-options Richtlinie über die select element.

    Controller

    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>

    Diese binden die ausgewählten product Objekt der ng-model Eigenschaft - selected_product. Danach können Sie dieses verwenden:

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

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

    InformationsquelleAutor der Antwort bmleite

  2. 9

    Statt ng-options="product as product.label for product in products"> im select-element, können Sie auch dieses verwenden:

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

    die genauso funktioniert auch gut.

    InformationsquelleAutor der Antwort webacs.com.au

  3. 5

    Auch das können Sie gerne tun:

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

    wo "selectedProd" ausgewählt werden Produkt.

    InformationsquelleAutor der Antwort Bohdan Kolesnyk

  4. 1
    <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'}
    ]
   };
}]);

    genommen von AngularJS docs

    InformationsquelleAutor der Antwort Yassine Qoraiche

Schreibe einen Kommentar