在 Angular JS 中选择 - 我需要元素和值属性相同答案

【问题标题】：Select in Angular JS - I need the element and value attribute to be the same在 Angular JS 中选择 - 我需要元素和值属性相同
【发布时间】：2014-10-12 22:40:48
【问题描述】：

我有一个这样的 json，存储在 $scope.result 中：

{ "tips":["p1","p2","p3","p4"],"actualTip":"p4"}

我需要用 Angular 做一个组合框。我这样做了：

<select class="form-control" id="one" ng-model="actualTip" ng-options="tips for tips in result.tips" ></select>

它给了我一个像这样的组合框：

<option value="0"> p1 </option>
<option value="1"> p2 </option>
<option value="2"> p3 </option>

我需要选项的文本和值具有相同的“值”。

例如：

<option value="p1"> p1 </option>
<option value="p2"> p2 </option>

编辑：我忘了说我需要组合框以“actualTip”中选择的选项开头

我该怎么做？

【问题讨论】：

它将选项设置为该选项，但设置为模型的值将是您想要的，它是角度内部的。

标签： javascript html angularjs angularjs-scope

【解决方案1】：

这是一个sn-p：http://codepen.io/rmadhuram/pen/leukx

不要担心 Angular 存储在选项中的值。您将在范围变量中获得所需的正确值（您可以在控制台中看到）。

此外，您只需使用所需的值初始化范围变量。

JavaScript：

angular.module('app', [])
 .controller('testCtrl', ['$scope', function($scope) {
  $scope.result = { "tips":["p1","p2","p3","p4"],"actualTip":"p4"};

  $scope.onSelect = function() {
    console.log('selected: ' + $scope.actualTip);
  };

  $scope.actualTip = "p4"; 
}]);

HTML：

<div ng-app="app">
  <div ng-controller="testCtrl">
    <select class="form-control" id="one" ng-model="actualTip" ng-change="onSelect()" ng-options="tips for tips in result.tips" ></select>
  </div>
</div>

【讨论】：