使用 Angular 键值数组中的键在视图中显示值答案

【问题标题】：Display value in view using key from Angular key-value array使用 Angular 键值数组中的键在视图中显示值
【发布时间】：2017-06-23 05:47:02
【问题描述】：

<li class="dropup">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
           {{selectedHub}}<span class="caret"></span></a>
                
                <ul class="dropdown-menu pre-scrollable">
                        <li ng-repeat="hub in hubs">
                           <a ng-click="selectHub(hub.Key)" href="">{{hub.Value}}</a>
                         </li> 
                </ul>                   
        </li>

我有一个 ID 的下拉列表，我有存储 ID 和值信息的角度“键值数组”。我想根据选定的 ID 显示值。我已经编写了一些代码以供参考，我是如何尝试实现这一目标的。

$scope.hubs = [];  $scope.selectedHub = null;
$scope.selectHub = function (data) {
        $scope.selectedHub = data;
    };

如果有人可以帮助我，将不胜感激。另外，如果问题不清楚，请告诉我，我会努力改进。这是我的第一个问题。谢谢:)

【问题讨论】：

您是要显示下拉列表还是所选下拉列表的结果？
我有角度“键值数组”？？？，你能展示一下这个对象吗？？
@Weedoze 我正在尝试显示所选下拉列表的结果。
@Simarpreetkaur 下拉菜单的代码在哪里？填充下拉列表的数组是什么？

标签： javascript angularjs

【解决方案1】：

希望这有帮助，请您检查一次，我已将 hub 传递给功能并显示 Key 和 Value，如果您只想显示 Value，您可以使用 selectedHub.Value

angular.module("myApp",[]).controller("myCrtl",function($scope){
$scope.hubs = [{Key:1,Value:"val1"},{Key:2,Value:"val2"},{Key:3,Value:"val3"}];  $scope.selectedHub = null;
$scope.selectHub = function (data) {
        $scope.selectedHub = data;
    };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCrtl">
<li class="dropup">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
           {{selectedHub.Key}}--{{selectedHub.Value}}<span class="caret"></span></a>
                
                <ul class="dropdown-menu pre-scrollable">
                        <li ng-repeat="hub in hubs">
                           <a ng-click="selectHub(hub)" href="">{{hub.Value}}</a>
                         </li> 
                </ul>                   
        </li>
        
</body>

【讨论】：

谢谢斯里尼瓦斯！！这正是我想做的:)
如果它符合您的要求，请您接受这个答案

【解决方案2】：

如果你想显示 id 并选择对象，你可以使用 ng-options ，考虑你的 values 对象如下

$scope.values = [{
    id: 1,
    value: 'abc1'
  }, {
    id: 2,
    value: 'abc2'
  }, {
    id: 3,
    value: 'abc3'
  }];

你可以使用 ng-options 作为

<select ng-model="selectedValue" ng-options="value.id for value in values"/>

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

app.controller("myCrtl", function($scope) {

  $scope.values = [{
    id: 1,
    value: 'abc1'
  }, {
    id: 2,
    value: 'abc2'
  }, {
    id: 3,
    value: 'abc3'
  }];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCrtl">

This is selected Value : {{selectedValue}}<br><br>
<select ng-model="selectedValue" ng-options="value.id for value in values"/>



</body>

【讨论】：

谢谢@Srinivas 这适用于选择列表，但我设计了我的 UI 与使用
的引导菜单
可以在 selectHub(hub) 中传递 hub 对象并赋值给 $scope 变量
这就是我想要做的。请查看更新的问题，但我只能显示 ID 而不是值。