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

Question

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

Answer 1

Just use ng-options
The code is a bit slow to load. . Wait a moment to see the effect:
http://codepen.io/flybywind/pen/GZyydY

Answer 2

template

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

script

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

In fact, this is my problem. The solution to the problem is to directly bind the ng-model to the object, and then bind the value of the option to the same object. This solves the 'selection problem'. In the background, the id or text value is taken directly from the object. id or text. thanks!

Answer 4

It is available in the official documentation of angularJS. You need to bring your own ladder
The following is an example from the documentation of the version 1.4.7 I used

---

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

The result is that the name part is displayed in the option, and the model obtains the id. The model here uses data.repeatSelect because the loop is on the option, resulting in a different scope