Question

$scope.states = [ 
{"state_id":1,"state_code":"AN","state_name":"Andaman and Nicobar"},
{"state_id":2,"state_code":"AP","state_name":"Andhra Pradesh"},
{"state_id":3,"state_code":"AR","state_name":"Arunachal Pradesh\t"},
{"state_id":4,"state_code":"AS","state_name":"Assam"},
{"state_id":5,"state_code":"BR","state_name":"Bihar"}
];

<div class="form-group">
    <label class="control-label col-sm-4">State :</label>
    <div class="col-sm-6">
        <select data-ng-model='state' id="state" class="form-control">
            <option value=''>--SELECT--</option>
            <option data-ng-repeat='st in states' value="{{st.state_code}}">{{st.state_name}}</option>
        </select>
    </div>
</div>

通过提取$scope.state，我获得了选定的州值，即st.state_code

但我想获取所选名称，即st.state_name。

使用JQuery，我可以通过$("#state option:selected").text()获取它，但是，

如何使用AngularJS实现它？

Answer 1

你走在正确的轨道上，只需在控制器中有一个功能，并将 state 作为参数，

<强>样本

＆＃13;

var eventsApp = angular.module('myApp',[])
eventsApp.controller('EventController', function($scope){
$scope.states = [
{"state_id":1,"state_code":"AN","state_name":"Andaman and Nicobar"},
{"state_id":2,"state_code":"AP","state_name":"Andhra Pradesh"},
{"state_id":3,"state_code":"AR","state_name":"Arunachal Pradesh\t"},
{"state_id":4,"state_code":"AS","state_name":"Assam"},
{"state_id":5,"state_code":"BR","state_name":"Bihar"}
];
$scope.loadDistrict = function(selectedstate){
  alert(selectedstate);
}
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body>
    <div ng-app="myApp" ng-controller="EventController">
      <div class="form-group">
    <label class="control-label col-sm-4">State :</label>
    <div class="col-sm-6">
        <select data-ng-model='state' id="state" class="form-control" data-ng-change='loadDistrict(state)'>
            <option value=''>--SELECT--</option>
            <option data-ng-repeat='st in states' value="{{st.state_name}}">{{st.state_name}}</option>
        </select>
    </div>
</div>
    </div>
</body>

＆＃13;

Answer 2

您可以使用Touch.Ended代替此ng-options

ng-repeat

然后使用ng-options="item.state_name as item.state_name for item in states"变量来访问值

ng-model

演示

<label class="control-label col-sm-4">State : {{state}}</label>

angular.module("app",[])
.controller("ctrl",function($scope){

$scope.states = [
{"state_id":1,"state_code":"AN","state_name":"Andaman and Nicobar"},
{"state_id":2,"state_code":"AP","state_name":"Andhra Pradesh"},
{"state_id":3,"state_code":"AR","state_name":"Arunachal Pradesh\t"},
{"state_id":4,"state_code":"AS","state_name":"Assam"},
{"state_id":5,"state_code":"BR","state_name":"Bihar"}
];

})

Answer 3

当您使用libiPhone.a时，您将value = {{st.state_code}}的{{1}}作为ID值。如果您将其更改为ng-model，则会将名称作为您选择的值。

根据您的要求，您可以使用jQLite来实现：

select

Plunker here

希望这有帮助。

Answer 4

在值中，您输入state_name，然后您将获得状态名称

<option data-ng-repeat='st in states' value="{{st.state_name}}">{{st.state_name}}</option>

Answer 5

var eventsApp = angular.module('myApp',[])
eventsApp.controller('EventController', function($scope){
    $scope.states = [
        {"state_id":1,"state_code":"AN","state_name":"Andaman and Nicobar"},
        {"state_id":2,"state_code":"AP","state_name":"Andhra Pradesh"},
        {"state_id":3,"state_code":"AR","state_name":"Arunachal Pradesh\t"},
        {"state_id":4,"state_code":"AS","state_name":"Assam"},
        {"state_id":5,"state_code":"BR","state_name":"Bihar"}
    ];
    $scope.loadDistrict = function(){
        alert($scope.state.state_name);
    }
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="myApp">
    <div ng-controller="EventController">
      <div class="form-group">
        <label class="control-label col-sm-4">State :</label>
        <div class="col-sm-6">
          <select data-ng-model='state' id="state" class="form-control" data-ng-change='loadDistrict()' data-ng-options="state as state.state_name for state in states track by state.state_id">
            <option value=''>--SELECT--</option>
          </select>
        </div>
      </div>
    </div>
</body>

看看上面的答案。它将给出所选状态的整个对象。 $ scope.state将具有选定状态的对象，您可以访问状态对象的任何属性。

Answer 6

只需将选项的值从$ state.code更改为$ state.name

    $scope.states = [ 
{"state_id":1,"state_code":"AN","state_name":"Andaman and Nicobar"},
{"state_id":2,"state_code":"AP","state_name":"Andhra Pradesh"},
{"state_id":3,"state_code":"AR","state_name":"Arunachal Pradesh\t"},
{"state_id":4,"state_code":"AS","state_name":"Assam"},
{"state_id":5,"state_code":"BR","state_name":"Bihar"}
];

<div class="form-group">
    <label class="control-label col-sm-4">State :</label>
    <div class="col-sm-6">
        <select data-ng-model='state' id="state" class="form-control">
            <option value=''>--SELECT--</option>
            <option data-ng-repeat='st in states' value="{{st.state_name}}">{{st.state_name}}</option>
        </select>
    </div>
</div>

这将完成这项工作。

从select标签中获取所选名称

6 个答案: