Ng-selected not working angular js 1.6.5
在 AngularJS 1.6.5 中，如果 ng-selected 指令没有按预期工作，可能是由于几个常见的问题。以下是一些可能的原因和解决方法：
1. 确保 ng-selected 的表达式返回布尔值
ng-selected 指令需要一个表达式，该表达式应返回一个布尔值。如果表达式返回的不是布尔值，可能会导致指令无法正常工作。
2. 确保模型和视图绑定正确
确保你的模型和视图绑定正确，并且模型的值与选项的值匹配。
3. 使用 ng-options 指令
在处理下拉列表时，通常推荐使用 ng-options 指令，因为它更强大且更易于使用。ng-options 可以自动处理选项的选择状态。
示例代码
以下是一个示例，展示了如何使用 ng-selected 和 ng-options 指令：
使用 ng-selected
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ng-selected Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="option in options" ng-selected="option.value === selectedValue">{{ option.label }}</option>
</select>
<script>
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.options = [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' }
];
$scope.selectedValue = '2';
});
</script>
</body>
</html>使用 ng-options
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ng-options Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedValue" ng-options="option.value as option.label for option in options"></select>
<script>
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.options = [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' }
];
$scope.selectedValue = '2';
});
</script>
</body>
</html>解释
- 使用
ng-selected：ng-selected="option.value === selectedValue"：这个表达式返回一个布尔值，表示当前选项是否应该被选中。ng-repeat：用于循环生成选项。
- 使用
ng-options：ng-options="option.value as option.label for option in options"：ng-options指令用于生成选项，并自动处理选中状态。ng-model="selectedValue"：绑定下拉列表的选中值到模型selectedValue。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
