Question

我知道这可能很容易！我有两个单选按钮，用于显示带有输入字段的div，如果该网站有＆＃39;单选按钮已被选中。文本输入字段设置为名为＆＃39; sitePostcode＆＃39;的ng-model。我想要实现的是，如果＆＃39;解决方案＆＃39;然后选择单选按钮＆＃39; sitePostcode＆＃39;模特将有解决方案＆＃39;在里面。如果＆＃39;网站＆＃39;选择了单选按钮，然后选择了“站点代码”＆＃39;将包含输入框中输入的内容。

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

我认为单选按钮也应该是“网站代码”＆＃39;模型，但是当我尝试并在输入字段中输入文本时，当模型值从＆＃39; site＆＃39;更改时，div将消失。干杯

Answer 1

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

Answer 2

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

另一种方法是按照你的建议。您可以将单选按钮的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>

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

Answer 3

您可以观察product.group的更改并根据它更改sitePostcode。

＆＃13;

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

＆＃13;

使用带角度的单选按钮更新其他模型

3 个答案: