Question

<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;
    };

如果有人能帮助我，我将不胜感激。另外，如果问题不明确，请告诉我，我会尽力改进。这是我的第一个问题。谢谢:)）

Answer 1

如果要显示id和选择对象，可以使用ng-options，请考虑下面的值对象

$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"/>

＆＃13;

var app = angular.module("myApp", []);

app.controller("myCrtl", function($scope) {

  $scope.values = [{
    id: 1,
    value: 'abc1'
  }, {
    id: 2,
    value: 'abc2'
  }, {
    id: 3,
    value: 'abc3'
  }];

});

＆＃13;

<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>

＆＃13;

Answer 2

希望这有帮助，请您检查一下，我已经通过集线器功能并显示键和值，如果您只想显示值，您可以使用选择的Hub.Value

＆＃13;

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;
    };

});

＆＃13;

<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>

＆＃13;

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

2 个答案: