NG選項文本

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

我想顯示是和否的選擇框，而我必須當分別選擇是或否時，向服務器發送真或假。

我有另一個div，我必須顯示選項文本（即是或否（選擇一個））。我用{{selectedItem.label}}但它不工作。請幫忙。

來源

2017-01-12 karthi

使用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>

來源

2017-01-12 13:23:57 rambo

無法獲取引用方式當設置選項時，它返回選擇名稱，它只包含顯示的內容，selection.name和value爲selection.result，但ng-model只包含值，因此在表達式中添加了三元運算符，它由表達式 – rambo

注意：我不知道如何像Sajeetharan所做的那樣對代碼進行格式化，所以對不起。 – rambo

感謝您使用的ternery操作員幫助了我。 – karthi

演示

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>

來源

2017-01-12 12:18:49 Sajeetharan

在HTML我想「是」或「否」，在選擇一臺本節

是：{{currentSelected}}

。現在，如果我們改變選擇框，那麼在該部分中我們會變爲true或false。 – karthi

這取決於你需要什麼。將其更改爲ng-options =「selection.name as selection.name – Sajeetharan

我想在前端顯示」是「或」否「，而我必須根據所選內容向服務器發送真或假 – karthi

使用指令來獲得顯示所選項目的名稱值的理想結果，但結果值發送到後端。

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>

來源

2017-01-13 12:58:14 Deep

獲取裏面的html

回答

是：{{currentSelected}}

獲取裏面的html

回答

是：{{currentSelected}}

相關問題