如何在 angularjs 的选项中使用 ng-if?
How to use ng-if in options in angularjs?
如果 status == 1
,我想将我的状态更改为 on
,如果 status == 0
,我想将状态更改为 off
。我能够以这种方式在 table 上做到这一点
<td>
<span ng-if="configuration.rule.onSuccess == 1">
On
</span>
<span ng-if="configuration.rule.onSuccess == 0">
Off
</span>
</td>
如何在 select 框选项中实现同样的事情
<td>
<select class="browser-default event relay state" required>
<option ng-value="n.onSuccess">{{configuration.rule.onSuccess}}</option>
<option value="1">On</option>
<option value="0">Off</option>
</select>
我需要打开和关闭 <option ng-value="n.onSuccess">{{configuration.rule.onSuccess}}</option>
而不是显示 0 和 1.if 我使用 ng-if ,它同时显示打开和 off.How 我可以这样做吗?
将 ng-model 添加到 select 标签。由于您想将选项值绑定到 onSuccess 变量。
这是工作代码。更改了一些范围变量以显示示例演示
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
<script>
(function() {
var app = angular.module("testApp", ['ui.bootstrap', 'angular.filter']);
app.controller('testCtrl', ['$scope', '$http', function($scope, $http) {
}]);
}());
</script>
<style></style>
</head>
<body ng-app="testApp">
<div ng-controller="testCtrl">
<div>
<span ng-if="onSuccess == 1">
On
</span>
<span ng-if="onSuccess == 0">
Off
</span>
</div>
<select class="browser-default event relay state" required ng-model="onSuccess">
<option ng-model="onSuccess">{{configuration.rule.onSuccess}}</option>
<option value="1">ON</option>
<option value="0">OFF</option>
</select>
</div>
</body>
</html>
一种方法:
var myApp = angular.module('myApp', []);
myApp.controller('indexController', function($scope){
$scope.configuration = {
"role": {
"onSuccess": 0
}
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="indexController">
<select ng-model="configuration.role.onSuccess">
<option value="1">On</option>
<option value="0">Off</option>
</select>
<input type="button" value="Set Value to ON" ng-click="configuration.role.onSuccess=1;">
<input type="button" value="Set Value to OFF" ng-click="configuration.role.onSuccess=0;">
</body>
如果 status == 1
,我想将我的状态更改为 on
,如果 status == 0
,我想将状态更改为 off
。我能够以这种方式在 table 上做到这一点
<td>
<span ng-if="configuration.rule.onSuccess == 1">
On
</span>
<span ng-if="configuration.rule.onSuccess == 0">
Off
</span>
</td>
如何在 select 框选项中实现同样的事情
<td>
<select class="browser-default event relay state" required>
<option ng-value="n.onSuccess">{{configuration.rule.onSuccess}}</option>
<option value="1">On</option>
<option value="0">Off</option>
</select>
我需要打开和关闭 <option ng-value="n.onSuccess">{{configuration.rule.onSuccess}}</option>
而不是显示 0 和 1.if 我使用 ng-if ,它同时显示打开和 off.How 我可以这样做吗?
将 ng-model 添加到 select 标签。由于您想将选项值绑定到 onSuccess 变量。
这是工作代码。更改了一些范围变量以显示示例演示
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
<script>
(function() {
var app = angular.module("testApp", ['ui.bootstrap', 'angular.filter']);
app.controller('testCtrl', ['$scope', '$http', function($scope, $http) {
}]);
}());
</script>
<style></style>
</head>
<body ng-app="testApp">
<div ng-controller="testCtrl">
<div>
<span ng-if="onSuccess == 1">
On
</span>
<span ng-if="onSuccess == 0">
Off
</span>
</div>
<select class="browser-default event relay state" required ng-model="onSuccess">
<option ng-model="onSuccess">{{configuration.rule.onSuccess}}</option>
<option value="1">ON</option>
<option value="0">OFF</option>
</select>
</div>
</body>
</html>
一种方法:
var myApp = angular.module('myApp', []);
myApp.controller('indexController', function($scope){
$scope.configuration = {
"role": {
"onSuccess": 0
}
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="indexController">
<select ng-model="configuration.role.onSuccess">
<option value="1">On</option>
<option value="0">Off</option>
</select>
<input type="button" value="Set Value to ON" ng-click="configuration.role.onSuccess=1;">
<input type="button" value="Set Value to OFF" ng-click="configuration.role.onSuccess=0;">
</body>