为什么此ng-click只能用于函数，而不适用于这些值？ [英] Why does this ng-click work with a function, but not with these values?

问题描述

我有以下html：

 < div class = btn-group> 
< button type = button class = btn btn-default dropdown-toggle data-toggle = dropdown> 
 {{myValue}} 
< span class = caret>< / span> 
< / button> 
< ul class = dropdown-menu> 
< li ng-repeat = valueList中的值> 
< button class = btn btn-link ng-click = myValue = value.key> 
 {{value.key}} 
< / button> 
< / li> 
< / ul> 
< / div> 
  

在控制器中：

  $ scope.valueList = [{键： A}，{键： B}]; 
 $ scope.myValue = $ scope.valueList [0] .key; 
  

这将返回一个以 A开头的下拉菜单，其中包含 A和

现在，当单击下拉按钮时，上述html不会将myValue变成 B。但是，当我将ng-click更改为 ng-click = changeValue（value.key） 时，它确实可以正常工作。为什么 myValue = value.key 什么都不做，而 {{value.key}} 显示正确的内容呢？ / p>

函数的完整性：

  $ scope changeValue = function（valueKey） {
 $ scope.myValue = valueKey 
} 
  

解决方案

因为 ng-repeate 创建新作用域，而 myValue 不在作用域内。因此，如果您使用 controllerAs 语法，则它可以正常工作。

  var app = angular.module（'myApp'，[]）; app.controller（'AppCtrl'，function（$ scope）{var vm = this; vm.valueList = [{key： A}，{key： B}]]; vm.myValue = vm.valueList [0 ] .key;}）;  

 < script src =  https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js\"></script><div ng-app = myApp ng-controller = AppCtrl作为vm> < div class = btn-group> < button type = button class = btn btn-default dropdown-toggle data-toggle = dropdown> {{vm.myValue}}< span class = caret>< / span> < / button> < ul class = dropdown-menu> < li ng-repeat = vm.valueList中的值> < button class = btn btn-link ng-click = vm.myValue = value.key> {{value.key}}< / button> < / li> < / ul> < / div>< / div>  

I have the following html:

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        {{myValue}} 
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li ng-repeat="value in valueList">
            <button class="btn btn-link" ng-click="myValue = value.key">
                {{value.key}}
            </button>
        </li>
   </ul>
</div>

In the controller:

$scope.valueList = [ { key: "A" }, { key: "B" } ];
$scope.myValue = $scope.valueList[0].key;

This returns a dropdown starting with "A" with "A" & "B" being options.

Now, the above html will NOT turn myValue into "B", when the dropped-down button is clicked. However, when I change the ng-click into ng-click="changeValue(value.key)" it does work as expected. Why does the myValue = value.key do nothing while {{ value.key }} shows the right things?

Function for completeness:

$scope changeValue = function(valueKey) { 
    $scope.myValue = valueKey 
}

解决方案

Because ng-repeate create new scope and myValue is out of scope. so if you are using controllerAs syntax it works correctly.

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
  var vm = this;
  vm.valueList = [{
    key: "A"
  }, {
    key: "B"
  }];
  vm.myValue = vm.valueList[0].key;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl as vm">
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        {{vm.myValue}} 
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li ng-repeat="value in vm.valueList">
        <button class="btn btn-link" ng-click="vm.myValue = value.key">
                {{value.key}}
            </button>
      </li>
    </ul>
  </div>
</div>

这篇关于为什么此ng-click只能用于函数，而不适用于这些值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！