使用带角度的单选按钮更新不同的模型

Posted

技术标签:

【中文标题】使用带角度的单选按钮更新不同的模型【英文标题】:Updating a different model using radio buttons with angular 【发布时间】:2015-03-24 20:03:30 【问题描述】:

我知道这可能很容易!如果选择了“站点”单选按钮,我有两个单选按钮可以显示带有输入字段的 div。文本输入字段设置为名为“sitePostcode”的 ng-model。我想要实现的是,如果选择了“解决方案”单选按钮,那么“站点邮政编码”模型中将包含“解决方案”。如果选择了 '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”模型,但是当我尝试这样做并在输入字段中输入文本时,随着模型值从“site”更改,div 会消失。干杯

【问题讨论】:

【参考方案1】:

您可以查看product.group的变化,并根据它更改sitePostcode。

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

【讨论】:

【参考方案2】:

单选按钮应该属于一个组。将“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/。

【讨论】:

【参考方案3】:

我认为最好的方法是检查控制器中的product.group 值并将sitePostcode 设置为Solution。

另一种方法是按照您的建议。您可以将单选按钮的ng-model 设置为sitePostcode,并将您的支票更改为ng-show="product.group != 'Solution'"。这是假设用户不会在输入字段中键入 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>

但正如我所说,最好在控制器中执行此操作。

【讨论】:

以上是关于使用带角度的单选按钮更新不同的模型的主要内容,如果未能解决你的问题,请参考以下文章

根据 Woocommerce 结帐中的单选按钮动态更新费用

当有ngModel时,检查角度2中的单选按钮

如何在Django管理员中制作单选按钮

如何使复选框的行为类似于角度 6 中的单选按钮?

从不同的单选按钮组获取单选按钮标签并附加到分区

如何在 django 中创建表单和模型中使用的字段的单选按钮