Question

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

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>

Answer 1

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

要解决此问题，请使用点语法：

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>

Answer 2

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

Answer 3

不需要使setType成为一个函数，你的按钮超出了ng-repeat指令，如果你在

标签中尝试了div按钮，它就无法绑定范围在哪里下来，它会工作。其他每件事看起来都很好。像这样的事情，

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

：）

角度范围变量不绑定

3 个答案: