在html中获取ng-option文本
[英]Getting ng-option text inside html
问题描述
我的代码：
HTML：
<select ng-model="selectedItem" ng-options="item.result as item.name for item in items"></select>
JS：
$scope.items = [{'name': 'Yes', 'result': true },{ 'name': 'No', 'result': false }];
我想在选择框中显示“是”和“否”，而当分别选择“是”或“否”时，我必须向服务器发送true和false。
我还有另一个div，我必须在其中显示选项文本（即Yes或No（选中一个））。 我使用了{{selectedItem.label}}，但无法正常工作。 请帮忙。
3 个解决方案
解决方案1
0 2017-01-12 12:18:49
演示版
var app = angular.module('todoApp', []); app.controller("dobController", ["$scope", function($scope) { $scope.items = [{'name': 'Yes', 'result': true },{ 'name': 'No', 'result': false }]; } ]);
<!DOCTYPE html> <html ng-app="todoApp"> <head> <title>To Do List</title> <link href="skeleton.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> <script src="MainViewController.js"></script> </head> <body ng-controller="dobController"> <select class="form-control" id="selection" ng-model="currentSelected" ng-options="selection.result as selection.name for selection in items"></select> <div> <h1> Selected one is : {{currentSelected}} </h1> </div> </body> </html>
解决方案2
0 已采纳 2017-01-12 13:23:57
使用了Sajeetharan的答案，并对其进行了更新以满足您的要求。 以下是代码：
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To Do List</title>
<link href="skeleton.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="MainViewController.js"></script>
</head>
<body ng-controller="dobController">
<select class="form-control" id="selection" ng-model="currentSelected" ng-options="selection.result as selection.name for selection in items"></select>
<div>
<h1> Selected one is : {{currentSelected? "Yes": (currentSelected == null)? "":"No"}} </h1>
</div>
<script>
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
function($scope) {
$scope.items = [{'name': 'Yes', 'result': true },{ 'name': 'No', 'result': false }];
}
]);
</script>
</body>
</html>
解决方案3
0 2017-01-13 12:58:14
使用指令可获得显示所选项目名称值的所需结果，但将结果值发送到后端。
var app = angular.module('app', []); app.controller("myctrl", ["$scope", function($scope) { $scope.items = [{ 'name': 'Yes', 'result': true }, { 'name': 'No', 'result': false }]; } ]); app.filter('getvalue', function() { return function(value, array) { if (value !== undefined && value !== null) { var selectedOption = array.filter(function(l) { if (l.result == value) { return l; } })[0]; return selectedOption["name"]; } else { return ""; } } });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="app" ng-controller="myctrl"> <select class="form-control" id="selection" ng-model="currentSelected" ng-options="selection.result as selection.name for selection in items"></select> <div> Displayed Text : {{currentSelected | getvalue:items}} </div> <div> Value which will be send : {{currentSelected}} </div> </body>
ng-option 的使用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.