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