angular.js - angular中select如何获取文本值，并且可以确定option的选中状态

Question

在做省市联动。option中value是省市编码 text是名称，
如何才能既确定selected选项，又获取text名称？

Answer 1

Utilisez simplement ng-options
Le code est un peu lent à charger. . Attendez un instant pour voir l'effet :
http://codepen.io/flybywind/pen/GZyydY

Answer 2

modèle

<p ng-controller="MyCtrl">
    <select ng-model="province">
        <option value="">--province--</option>
        <option ng-repeat="p in provinces" value="{{p.value}}">{{p.text}}</option>
    </select>
    <select ng-model="city">
        <option value="">--city--</option>
        <option ng-repeat="c in citys" value="{{c.value}}">{{c.text}}</option>
    </select>
</p>

scénario

angular.module('myApp', [])
        .controller('MyCtrl', function ($scope) {
            $scope.province = '';
            $scope.city = '';
            $scope.citys = null;
            $scope.provinces = [
                {
                    value: 1,
                    text: 'jiangsu',
                    citys: [
                        {
                            value: 1,
                            text: 'nanjing'
                        }
                    ]
                },
                {
                    value: 2,
                    text: 'anhui',
                    citys: [
                        {
                            value: 1,
                            text: 'hefei'
                        }
                    ]
                }
            ];

            $scope.$watch('province', function (value) {
                if (!value) {
                    $scope.citys = null;
                } else {
                    $scope.citys = $scope.provinces.filter(function (p) {
                        return value == p.value;
                    })[0].citys;
                }
                $scope.city = '';
            });
        });

Answer 3

En fait, c'est mon problème. La solution au problème est de lier directement le modèle ng à l'objet, puis de lier la valeur de l'option au même objet. Cela résout le « problème de sélection ». l'identifiant ou la valeur du texte en arrière-plan, directement L'identifiant ou le texte de l'objet. merci!

Answer 4

Il est disponible dans la documentation officielle d'angularJS, vous devez apporter votre propre échelle
Ce qui suit est un exemple tiré de la documentation de la version 1.4.7 que j'ai utilisée

---

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

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

Le résultat est que la partie nom est affichée dans l'option et le modèle obtient l'identifiant. Le modèle ici utilise data.repeatSelect car la boucle est sur l'option, ce qui donne une portée différente