angular.js - angular中select如何获取文本值,并且可以确定option的选中状态
迷茫
迷茫 2017-05-15 17:00:31
0
4
979

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

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

membalas semua(4)
曾经蜡笔没有小新

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

刘奇

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 = '';
            });
        });
曾经蜡笔没有小新

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!

左手右手慢动作

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan