AngularJS中选定选项的不同值选择ng-repeat

Question

我有一个下拉列表，我试图创建下拉列表中显示的值与可用选项不同的地方 - 我为此目的使用angularjs。例如，如果我有以下文字，我想在用户打开下拉列表时显示完整值：

A - A适用于Apple

B - B代表香蕉

但在页面上我只想显示A或B，而不是完整描述，如下图所示：

这是我到目前为止最接近的（我的对象列表只是具有Value和Description属性的对象）但是我似乎无法在下拉列表中显示短值，尽管我知道我在各种网站上看到过这种在线设置。

<select>
 <option ng-repeat="item in myObject.Options" value="{{item.Value}}" title="{{item.Description}}">{{item.Description}}</option>
</select>

对象看起来像

var myObject = { "Options" : [
{ "Value":"A" , "Description":"A is for Apple" },
{ "Value":"B" , "Description":"B is for Banana" },
{ "Value":"C" , "Description":"C is for Cherry" } ]};

Answer 1

这是不可能的，因为您使用的HTML选择组件无法区分下拉列表中显示的文本和显示的值。

但是，您可以构建一个自己的指令来实现类似的行为，例如使用引导程序下拉菜单或md-select。

例如：

 <md-select md-selected-text="selectedItem.Value" ng-model="selectedItem">
      <md-option ng-repeat="item in items" ng-value="item">
         {{ item.Description }}
     </md-option>
 </md-select>

希望这会对你有帮助！

Answer 2

如果您只想显示Value部分，可以使用：

<select>
    <option ng-repeat="item in myObject.Options" value="{{item.Value}}" title="{{item.Description}}">
        {{item.Value}} - {{item.Description}}
    </option>
</select>

示例：

＆＃13;

＆＃13;

var app = angular.module('app', []);

app.controller('TestController', function($scope) {

  $scope.myObject = {
    "Options": [{
      "Value": "A",
      "Description": "A is for Apple"
    }, {
      "Value": "B",
      "Description": "B is for Banana"
    }, {
      "Value": "C",
      "Description": "C is for Cherry"
    }]
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller='TestController'>
  <select>
    <option ng-repeat="item in myObject.Options" value="{{item.Value}}" title="{{item.Description}}">{{item.Value}} - {{item.Description}} </option>
  </select>
</div>

＆＃13;

＆＃13;

＆＃13;