AngularJs:默认情况下未选中单选按钮

时间:2015-02-20 12:51:03

标签: javascript angularjs

我的指令模板

中有以下代码段
'<li ng-repeat="f in foos">' +
'<input type="radio" ng-change="foo(f.key)" ng-model="selectedFoo" name="foos" id="{{f.key}}" value="{{f.key}}">{{f.value}}</input>' +
'</li>' +

在我的链接方法中我有

scope.foos = [
                    { key: 'a', value: 'A', checked: true, symbol: 'a' },
                    { key: 'b', value: 'B', symbol: 'b' },
                    { key: 'c', value: 'C', symbol: 'c' }
                ];
scope.selectedFoo = "a";

我有方法foo执行此操作

scope.foo = function(selectedValue) {
                    scope.selectedMatchType = selectedValue;
                };

我面临两个问题

  1. 即使我已将ng-model设置为selectedFoo,但在显示单选按钮时,默认情况下不会设置下拉列表中的第一个元素。
  2. 方法foo仅对列表中的每个元素调用一次。所以,例如,如果我点击A,foo被调用,如果我然后点击B,foo被调用,如果我再次点击A foo没有被调用,但是如果我然后点击C,foo就是calle。
  3. 这里有什么问题?

1 个答案:

答案 0 :(得分:2)

请注意ng-repeat为每个模板创建了自己的范围,这意味着您必须在ng-model中使用$ parent作为输入。

ng-model="$parent.selectedFoo"

您的代码示例也是一个工作小提琴: http://jsfiddle.net/hpeinar/5gj9y6k4/