Question

我想获取选择的选项的value属性... 这是我的html

<select ng-model = "selectedElement">
 <option vlaue = "1">john</option>
 <option vlaue = "2">harry</option>
 <option vlaue = "3">peter</option>
</select>

运行代码时

console.log($scope.selectedElement);

我在控制台中得到结果“ john” 但是我期望得到的是value属性。例如在控制台中为“ 1”。有什么办法可以做到的。

Answer 1

您在vlaue中使用了option，这是不正确的。使用value来设置每个选项的值，并在$scope.selectedElement上为您提供该值

var app = angular.module('myApp', []);
app.controller('MainCtrl', ['$scope', function($scope) {
  
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">

  <select ng-model="selectedElement">
    <option value="1">john</option>
    <option value="2">harry</option>
    <option value="3">peter</option>
  </select>
  selected value is {{selectedElement}}
</div>

Answer 2

您也应该尝试此代码。将选择框数据定义为数组。

$scope.Fruits = [{
            Id: 1,
            Name: 'Apple'
        }, {
            Id: 2,
            Name: 'Mango'
        }, {
            Id: 3,
            Name: 'Orange'
        }];

然后在控制器页面中定义一个函数。

      $scope.GetValue = function (fruit) {
            var fruitId = $scope.ddlFruits;
            var fruitName = $.grep($scope.Fruits, function (fruit) {
                return fruit.Id == fruitId;
            })[0].Name;
            $window.alert("Selected Value: " + fruitId + "\nSelected Text: " + fruitName);
        }

最后在您的html中添加选择标记。

       <select ng-model="ddlFruits" ng-options="fruit.Id as fruit.Name for fruit in Fruits track by fruit.Id"
        ng-change="GetValue()">
    </select>

尝试使用此代码。希望可以解决您的问题。

Answer 3

<select ng-model="cart.fruit" ng-options="state as state.name for state in shelf"></select>
<br/>
<tt>Cost & Fruit selected: {{cart.fruit}}</tt>

尝试上面的代码。

如何在angularjs中访问选择标签的value属性

3 个答案: