如何在 select 框中或 angularjs 中的选项中使用 ng-model?
How to use ng-model inside select box or inside options in angularjs?
我有一个 table 数据,其中包含一个 select 框。我想使用 ng-model 而不是 {{n.triggerOn} 来绑定数据。
当我使用 <option value="">{{n.triggerOn}}</option>
时,下面的代码可以正常工作。但我想使用 ng -model <option ng-model="n.triggerOn"></option>
绑定数据
<td>
<select class="browser-default event trigger">
<option value="">{{n.triggerOn}}</option>
<option value="all">
All Conditions
</option>
<option value="any">
Any Conditions
</option>
</select>
</td>
我正在获取 JSON 格式的数据,如
rule: {
name:"abc",
status:"enable",
triggerOn: "all",
onSuccess: "on"
}
谁能帮帮我?我是 angularjs 的新手。对不起,如果这是愚蠢的错误。谢谢。
在 select 标签中使用 ngmodel 属性,在选项而不是值中使用 ng-value,如果它不起作用请告诉我。
这是工作代码
如果您需要任何更改,请告诉我。
<!DOCTYPE html>
<html>
<head>
<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://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
<script>
(function() {
angular.module("myApp", []).controller('test', ['$scope', function($scope) {
$scope.rules = [
{name:"abc", status:"enable", triggerOn: "none", onSuccess: "on" },
{name:"abc", status:"enable", triggerOn: "any", onSuccess: "on" },
{name:"abc", status:"enable", triggerOn: "all", onSuccess: "on" }
];
}]);
}());
</script>
<style></style>
</head>
<body ng-app="myApp">
<div ng-controller="test">
<select class="browser-default event trigger" ng-model="selectedRule"
ng-options="rule.triggerOn for rule in rules track by rule.triggerOn"></select>
<div>
<b>Selected Rule:</b> {{selectedRule.triggerOn}}
</div>
</div>
</body>
</html>
您需要再发送一个名为 selected in boolean 的变量。
$scope.rules = [
{name:"abc", status:"enable", triggerOn: "none", onSuccess: "on", selected: false },
{name:"abc", status:"enable", triggerOn: "any", onSuccess: "on", selected: true},
{name:"abc", status:"enable", triggerOn: "all", onSuccess: "on", selected: false }
];
然后在html
中绑定ng-selected属性
<option ng-repeat="rule in rules" value="{{rule.triggerOn}}"
ng-selected="{{ rule.selected == true }}">
我有一个 table 数据,其中包含一个 select 框。我想使用 ng-model 而不是 {{n.triggerOn} 来绑定数据。
当我使用 <option value="">{{n.triggerOn}}</option>
时,下面的代码可以正常工作。但我想使用 ng -model <option ng-model="n.triggerOn"></option>
<td>
<select class="browser-default event trigger">
<option value="">{{n.triggerOn}}</option>
<option value="all">
All Conditions
</option>
<option value="any">
Any Conditions
</option>
</select>
</td>
我正在获取 JSON 格式的数据,如
rule: {
name:"abc",
status:"enable",
triggerOn: "all",
onSuccess: "on"
}
谁能帮帮我?我是 angularjs 的新手。对不起,如果这是愚蠢的错误。谢谢。
在 select 标签中使用 ngmodel 属性,在选项而不是值中使用 ng-value,如果它不起作用请告诉我。
这是工作代码
如果您需要任何更改,请告诉我。
<!DOCTYPE html>
<html>
<head>
<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://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
<script>
(function() {
angular.module("myApp", []).controller('test', ['$scope', function($scope) {
$scope.rules = [
{name:"abc", status:"enable", triggerOn: "none", onSuccess: "on" },
{name:"abc", status:"enable", triggerOn: "any", onSuccess: "on" },
{name:"abc", status:"enable", triggerOn: "all", onSuccess: "on" }
];
}]);
}());
</script>
<style></style>
</head>
<body ng-app="myApp">
<div ng-controller="test">
<select class="browser-default event trigger" ng-model="selectedRule"
ng-options="rule.triggerOn for rule in rules track by rule.triggerOn"></select>
<div>
<b>Selected Rule:</b> {{selectedRule.triggerOn}}
</div>
</div>
</body>
</html>
您需要再发送一个名为 selected in boolean 的变量。
$scope.rules = [
{name:"abc", status:"enable", triggerOn: "none", onSuccess: "on", selected: false },
{name:"abc", status:"enable", triggerOn: "any", onSuccess: "on", selected: true},
{name:"abc", status:"enable", triggerOn: "all", onSuccess: "on", selected: false }
];
然后在html
中绑定ng-selected属性<option ng-repeat="rule in rules" value="{{rule.triggerOn}}"
ng-selected="{{ rule.selected == true }}">