angulaire.js - Comment obtenir la valeur textuelle de select en angulaire et déterminer l'état sélectionné de l'option

Question

Des liens provinciaux et municipaux sont en cours. En option, la valeur est le code de la province et de la ville. Le texte est le nom
Comment pouvons-nous déterminer l'option sélectionnée et obtenir le nom du texte ?

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