logo标签列表

无法使用AngularJS的单选按钮

javascriptangularjsangularjs-scope
3

但是我遇到了问题，当我选择单选按钮时，ng-model="title"没有改变。 我已经修改了很多代码，但是找不到解决方案。 有人可以帮忙吗？ 我认为在ng-repeat这里有问题？ 有人可以帮忙解决这个问题吗？ 我的代码如下：

<div class="container">
    <label data-ng-repeat="option in dbQuestion">
        <input type="radio" name="form-field"  ng-model="title" value="{{option.title}}" ng-checked="$index == 0" />
        {{option.title}}
    </label>
    <span>{{title}}</span>
</div>

__

var app = angular.module("SampleApp", []);

    app.controller("SampleAppCtrl", function($scope) {



        $scope.dbQuestion = [{
                    title: "Question 1",
                    descripton: "Description 1",
                    answers: [{
                            item1: "item1",
                            value: true
                        },
                        { item2: "item2", value: true },
                        { item3: "item3", value: true },
                        {
                            item4: "item4",
                            value: true
                        }
                    ]
                },

                {
                    title: "Question 5",
                    descripton: "Description 5",
                    answers: [{
                            item1: "item1",
                            value: true
                        },
                        { item2: "item2", value: true },
                        { item3: "item3", value: true },
                        {
                            item4: "item4",
                            value: true
                        }
                    ]
                },
            ];

            $scope.title = $scope.dbQuestion[0].title;

        });
Angular标签应该被移除 - 它是为Angular 2..4设计的。 - JGFMK
遵循黄金法则：始终在您的ng-model中加入一个点。可能是AngularJS中作用域原型/原型继承的细微差别是什么？的重复。 - georgeawg
2个回答
2
新的AngularJS开发者经常没有意识到，ng-repeat、ng-switch、ng-view、ng-include和ng-if都会创建新的子作用域，因此当这些指令涉及时，问题通常会出现。（请参见this example以快速了解该问题。）
通过遵循“最佳实践”在ng-model中始终使用“.”可以轻松避免这个基本类型的问题 - 观看3分钟的价值。Misko演示了ng-switch中的基本绑定问题。
在你的模型中使用“.”将确保原型继承得以实现。所以，请使用“.”。
<label data-ng-repeat="option in dbQuestion">
    <input type="radio" name="form-field"
           ng-model="title.selected" 
           value="{{option.title}}" 
           ng-checked="$index == 0" />
    {{option.title}}<br>
</label>
<p>Selected - {{title.selected}}</p>


app.controller("ctrl", function($scope) {
    $scope.title = { selected: ''};
    $scope.dbQuestion = [{ /*..*/ }];
});

更多信息请参见AngularJS Wiki - 作用域原型继承的微妙之处。

演示

angular.module("app", [])
.controller("ctrl", function($scope) {
     $scope.title = { selected: ''};

     $scope.dbQuestion = [{
                    title: "Question 1",
                    descripton: "Description 1",
                    answers: [{
                            item1: "item1",
                            value: true
                        },
                        { item2: "item2", value: true },
                        { item3: "item3", value: true },
                        {
                            item4: "item4",
                            value: true
                        }
                    ]
                },
                {
                    title: "Question 5",
                    descripton: "Description 5",
                    answers: [{
                            item1: "item1",
                            value: true
                        },
                        { item2: "item2", value: true },
                        { item3: "item3", value: true },
                        {
                            item4: "item4",
                            value: true
                        }
                    ]
                },
            ];


});
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
  <div class="container">
    <label data-ng-repeat="option in dbQuestion">
        <input type="radio" name="form-field"
               ng-model="title.selected" 
               value="{{option.title}}" 
               ng-checked="$index == 0" />
        {{option.title}}<br>
    </label>
    <p>Selected - {{title.selected}}</p>
  </div>
</body>

0
你需要使用 $parent.title 而不是 title，像这样：
<input type="radio" name="form-field"  ng-model="$parent.title" value="{{option.title}}" ng-checked="$index == 0" />

ng-repeat 会创建自己的作用域，为了从子作用域给父作用域赋值，我们需要使用$parent

使用$parent是一种代码异味，它是更深层次问题的症状。寻求更加健壮的解决方案。 - georgeawg
谢谢你的评论 :) 我的理解是：ng-repeat创建了它自己的作用域，为了从子作用域分配值到父作用域，我们需要使用$parent，请让我知道你的看法。 - Ankit
通过遵循“最佳实践”（始终在ng-model中使用'.'）可以轻松避免原始类型的问题。观看Misko演示的ng-switch中的原始绑定问题，视频时长3分钟。 - georgeawg
1
$parent 方法缺乏健壮性。如果模板更改，控制器与 ng-model 指令之间的作用域增加怎么办？将 ng-model 绑定到对象属性上将始终有效，无论有多少诸如 ng-repeat、ng-switch、ng-if、ng-view、ng-include 等指令干预。更多信息请参见 AngularJS Wiki - 作用域原型继承的微妙之处。 - georgeawg
谢谢分享 :) 上面发布的答案只是在问题的背景下过于简化了。我完全同意（并有点感到吓到！）你对这个解决方案健壮性的看法 :) - Ankit
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接