角度范围变量不绑定答案

【问题标题】：angular scope variable not binding角度范围变量不绑定
【发布时间】：2015-02-20 19:27:14
【问题描述】：

我有一个带有动态下拉菜单的角度视图。当用户选择列表中的一个选项时，我试图设置一个范围变量。无论出于何种原因，它都没有在选择时设置。我认为这是范围的问题，但我无法弄清楚究竟是什么。

app.controller('MyController', function ($scope) {   
    $scope.myType = null;   
    $scope.types = [{name: 'a', isChecked:false}, {name: 'b', isChecked:false}, {name: 'c', isChecked:false}];  
    $scope.doSomething = function() {
       console.log($scope.myType); //null value
    }
}

视图从types 范围变量构建下拉列表。当用户选择一个时，我将myType 设置为选择的名称值，但是当我尝试在控制器中引用该变量时，它始终为空。

<div class="btn-group" dropdown>
    <button type="button" dropdown-toggle>
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">  
        <li ng-repeat="type in types" ng-click="myType = type.name">
            {{type.name}} <input type="checkbox" ng-checked="myType == type.name" /><label></label>
        </li>
    </ul>
</div>

<div ng-click="doSomething()">do something</div>

【问题讨论】：

标签： angularjs variables scope bind

【解决方案1】：

将 ng-click 事件设为函数：

$scope.setType() {
  $scope.myType = $scope.type.name;
}


<li ng-repeat="type in types" ng-click="setType()">
    {{type.name}} <input type="checkbox" ng-checked="myType == type.name" /><label></label>
</li>

【讨论】：

这不起作用，因为$scope.type 不会引用控制器中的任何内容。

【解决方案2】：

我认为这是继承范围的问题。对于ng-repeat 的每次迭代，都会创建一个新范围。这意味着myType 将在每个ng-repeat 范围内创建（而不是在您的控制器范围内）。所以，当你设置myType时，你并不是指控制器的myType。

要解决这个问题，请使用 dot 语法：

js:

app.controller('MyController', function ($scope) {   
    $scope.selected = { myType: null };   
    $scope.types = [{name: 'a', isChecked:false}, {name: 'b', isChecked:false}, {name: 'c', isChecked:false}];  
    $scope.doSomething = function() {
       console.log($scope.myType); //null value
    }
}

html:

<div class="btn-group" dropdown>
    <button type="button" dropdown-toggle>
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">  
        <li ng-repeat="type in types" ng-click="selected.myType = type.name">
            {{type.name}} <input type="checkbox" ng-checked="selected.myType == type.name" /><label></label>
        </li>
    </ul>
</div>

或使用$parent：

<div class="btn-group" dropdown>
    <button type="button" dropdown-toggle>
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">  
        <li ng-repeat="type in types" ng-click="$parent.myType = type.name">
            {{type.name}} <input type="checkbox" ng-checked="$parent.myType == type.name" /><label></label>
        </li>
    </ul>
</div>

【讨论】：

【解决方案3】：

无需将 setType 设为函数，您的按钮不在 ng-repeat 指令中，如果您在

中尝试使用 div 按钮，结果将无法绑定范围

在 li 下标记一些地方，它会起作用。否则一切看起来都很好。像这样的东西，

<li ng-repeat="type in types" ng-click="myType = type.name">
        {{type.name}} <input type="checkbox" ng-checked="myType == type.name" /><label></label>

 <a href = '' ng-click=doSomething(myType) />Submit
</li>

【讨论】：