首页angularjs 1.6.9 select ng-bind

angularjs 1.6.9 select ng-bind

时间: 2023-08-08 11:07:18 浏览: 152

在 AngularJS 1.6.9 中，您可以使用 `ng-options` 指令来设置下拉选项列表，然后使用 `ng-model` 指令将选定的值绑定到模型中。如果您想在选项中显示另一个值，可以使用 `ng-bind` 指令。以下是一个简单的示例： HTML 代码： ```html <select ng-model="selectedItem" ng-options="item.id as item.name for item in items"> <option value="">Select an item</option> </select> <p>You selected item {{selectedItem}} - {{selectedItemName}}</p> ``` AngularJS 控制器代码： ```javascript $scope.items = [ {id: 1, name: 'Item 1'}, {id: 2, name: 'Item 2'}, {id: 3, name: 'Item 3'} ]; $scope.selectedItem = ''; $scope.selectedItemName = ''; $scope.$watch('selectedItem', function(newVal, oldVal) { if (newVal !== oldVal) { var selectedItem = $filter('filter')($scope.items, {id: $scope.selectedItem}); $scope.selectedItemName = selectedItem[0].name; } }); ``` 在这个例子中，`ng-options` 指令将选项列表设置为 `items` 数组中的每个项目的 `id` 属性和 `name` 属性的组合。 `ng-model` 指令将所选项目的 `id` 绑定到 `$scope.selectedItem` 变量中。最后，`ng-bind` 指令将 `$scope.selectedItemName` 变量绑定到选中项目的 `name` 属性，以显示所选项的名称。

阅读全文