替換Angular.js中的select選項

我試圖用下拉選項「是/否」替換爲true和false，以便我可以使用ng-hide來使輸入字段的外觀變爲動態。但綁定不能按要求工作。請檢查JS bin鏈接https://jsbin.com/piteqoduba/1/edit?html,output並提供建議。替換Angular.js中的select選項

<div ng-app="myApp" ng-controller="myCtrl"> 
<p>Delivery to same address?</p> 
<ng-int="selectedVal={range.value}"></ng-int> 
<select ng-model="selectedVal" ng-options="range.display for range in range" > 

</select> 
<p ng-hide= "selectedVal" >Fill your address below.</p> 
<input type="text" ng-hide = "selectedVal"> 
</div> 
<script> 
var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
    $scope.range = [{display: "yes", value:true}, 
     {display: "no", value: false} 
     ]; 
}); 
</script>

來源

2017-10-06 Jim

，你會得到一個對象模型，所以你必須做一些像

<input type="text" ng-hide = "selectedVal.value">

Here is working fiddle

來源

2017-10-06 06:05:26 jitender

替代

ng-options="range.display for range in range"

與

ng-options="range.value as range.display for range in range"

這將在下拉顯示是/否，而值將真正/假。

來源

2017-10-06 06:09:57 Vikas2612

感謝Avnesh的格式。 – Vikas2612

試試這個。其實你正在使用選定的對象ng-hide =「selectedVal」。 selectedVal是Object。這是一個問題。你想要真或假。所以ng-hide =「selectedVal.value」是正確的。

<!DOCTYPE html> 
 
<html> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
<p>Delivery to same address?</p> 
 
<ng-int="selectedVal={range.value}"></ng-int> 
 
<select ng-model="selectedVal" ng-options="range.display for range in range" > 
 

 
</select><p>{{selectedVal}}</p> 
 
<p ng-hide="selectedVal.value" >Fill your address below.</p> 
 
<input type="text" ng-hide="selectedVal.value"> 
 
</div> 
 
<script> 
 
var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.range = [{display: "yes", value:true}, 
 
     {display: "no", value: false} 
 
     ]; 
 
}); 
 
</script> 
 
</body> 
 
</html>

來源

2017-10-06 06:14:48

你的答案和其他答案有什麼區別？ – jitender

區別是解釋。我在這裏添加了Snipt和他的例子。 –

替換Angular.js中的select選項

回答

相關問題