angular.js - Bagaimana untuk mendapatkan nilai teks pilih dalam sudut dan menentukan status pilihan yang dipilih

Question

Hubungan wilayah dan perbandaran sedang dijalankan. Dalam pilihan, nilai ialah kod wilayah dan bandar Teks ialah nama
Bagaimana kita boleh menentukan pilihan yang dipilih dan mendapatkan nama teks.

Answer 1

Hanya gunakan ng-options
Kod agak lambat untuk dimuatkan. . Tunggu sebentar untuk melihat kesannya:
http://codepen.io/flybywind/pen/GZyydY

Answer 2

templat

<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>

skrip

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

Sebenarnya, ini adalah masalah saya Penyelesaian masalah adalah dengan mengikat model-ng ke objek, dan kemudian mengikat nilai pilihan kepada objek yang sama. Ini menyelesaikan 'masalah pemilihan' id atau nilai teks di latar belakang, secara langsung Id atau teks objek. terima kasih!

Answer 4

Ia boleh didapati dalam dokumentasi rasmi angularJS, anda perlu membawa tangga anda sendiri
Berikut ialah contoh daripada dokumentasi versi 1.4.7 yang saya gunakan

---

<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'}
    ],
   };
}]);

Hasilnya ialah bahagian nama dipaparkan dalam pilihan dan model memperoleh id Model di sini menggunakan data.repeatSelect kerana gelung berada pada pilihan, menghasilkan skop yang berbeza