使用带角度的单选按钮更新不同的模型
Updating a different model using radio buttons with angular
我知道这可能很容易!我有两个单选按钮,如果选择了"site"单选按钮,它们将显示一个带有输入字段的div。文本输入字段设置为名为"sitePostcode"的ng模型。我试图实现的是,如果选择了"solution"单选按钮,那么"sitePostcode"模型中就会有"solution"。如果选择了"site"单选按钮,则"sitePostcode"将包含输入框中的内容。
<div>
<input type="radio" ng-model="product.group" value="Solution">Solution
<input type="radio" ng-model="product.group" value="Site">Site
</div>
<div ng-show="product.group == 'Site'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
我认为单选按钮也应该是"sitePostcode"模型,但当我尝试并在输入字段中输入文本时,div会随着模型值从"site"更改而消失。干杯
您可以查看产品组的变化,并根据它更改站点邮政编码。
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
</head>
<body data-ng-app="app" data-ng-controller="MainController">
<div>
<input type="radio" ng-model="product.group" value="Solution">Solution
<input type="radio" ng-model="product.group" value="Site">Site
</div>
<div ng-show="product.group == 'Site'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
<script>
var app = angular.module('app', []);
app.controller("MainController", function($scope) {
var customPostcode = '';
$scope.$watch('product.group', function (newVal, oldVal) {
if (newVal === 'Solution') {
customPostcode = $scope.sitePostcode;
$scope.sitePostcode = 'Solution';
} else {
$scope.sitePostcode = customPostcode;
}
});
});
</script>
</body>
</html>
单选按钮应该属于一个组。将"name"属性添加到输入字段中,并赋予它们相同的值。
<input name="group1" type="radio" ng-model="product.group" value="Solution">Solution
<input name="group1" type="radio" ng-model="product.group" value="Site">Site
Angularjs中的单选按钮可能很棘手。以下是他们如何工作的一个很好的例子:http://jsfiddle.net/K9MLk/246/.
我认为最好的方法是检查控制器中的product.group
值,并将sitePostcode
设置为Solution。
另一种方法是按照你的建议。您可以将单选按钮的ng-model
设置为sitePostcode
,并将复选框更改为ng-show="product.group != 'Solution'"
。这是假设用户不会在输入字段中键入解决方案。
<div>
<input type="radio" ng-model="sitePostcode" value="Solution">Solution
<input type="radio" ng-model="sitePostcode" value="Site">Site
</div>
<div ng-show="product.group != 'Solution'">
<input type="text" placeholder="Enter site postcode" ng-model="sitePostcode" class="form-control">
</div>
但正如我所说,最好在控制器中执行此操作。
相关文章:
- 视图ngValue-Angular JS中未更新模型的更改
- 需要使用触摸屏从 AngularJS 指令中更新模型
- 角度指令没有更新模型视图
- 复选框仅在第二次单击后更新模型
- Angular.js-Socket.io事件更新模型,而不是视图
- UI Select在删除后不会更新模型
- 为什么ng提交没有提交和更新模型
- AngularJS-基于URL更新模型
- 视图更改时,Ember.js更新模型
- Knockoutjs函数更新模型时应出现异常
- 挖空绑定不会更新模型
- 范围不更新模型中的更改
- 导航时更新模型变量
- 角度.js更新模型
- Ember.js不更新模型
- 在使用挖空自定义绑定时更新模型时更新元素
- 在自我更新时以ng重复更新模型
- 如何在主干中对列表进行排序时更新模型的顺序属性
- AngularJS 复选框不更新模型
- 更新模型中的数据不会绑定到控制器