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

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

如果有人能帮助我，这将不胜感激。另外，请让我知道，如果问题不清楚，我将尝试改进。这是我的第一个问题。谢谢：(

希望这会有所帮助，您可以检查一次，我已经通过了HUB来函数和显示键和值，如果您只想显示值，则可以使用eletectedHub.value.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>

如果要显示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"/>

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>

相关内容

最新更新

热门标签：