Question

我试图替换，将下拉选项“Yes / No”替换为true和false，以便我可以使用ng-hide来使输入字段的外观动态化。但绑定没有按预期工作。请检查JS bin链接https://jsbin.com/piteqoduba/1/edit?html,output并提供建议。

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

Answer 1

替代

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

与

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

这将在下拉列表中显示是/否，而值为真 / false 。

Answer 2

您将在模型中获得一个对象，因此您必须执行类似

的操作

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

Here is working fiddle

Answer 3

试试这个。实际上你正在使用选定的对象用于ng-hide =＆＃34; selectedVal＆＃34;。 selectedVal是Object。这是一个问题。你想要真或假。所以ng-hide =＆＃34; selectedVal.value＆＃34;是对的。

＆＃13;

<!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>

＆＃13;

替换Angular.js中的select选项

3 个答案: