AngularJS 在 ng-repeat 中更改变量

Question

我正在尝试根据单击的按钮设置一个变量。

这是我的代码：

'use strict'

angular.module('myApp')
.controller('AlineacionCtrl', function ($scope, $meteor) {

  $scope.activeIndex = {index: 0};

  $meteor.subscribe('kits').then(function (){
    $scope.kits = $meteor.collection(Kits, false);
    $scope.activeCategory = $scope.kits[0].name;
    console.log($scope.activeCategory);
    $scope.log = function (){
      console.log($scope.activeCategory);
    };
  });

});

.

<section layout="row" layout-align="center center" layout-wrap ng-init="activeIndex; activeCategory">
  <md-button flex="auto" flex-sm="45" flex-xs="100" ng-repeat="kit in kits | orderBy: 'order'" ng-class="{active: (activeIndex.index == $index)}" class="md-raised">
    <a href="" ng-click="activeIndex.index = $index; activeCategory = kit.name; log()" class="bold">{{kit.name}}</a>
  </md-button>
</section>

ng-click="activeIndex.index = $index; activeCategory = kit.name"; log()

我正在尝试将 activeCategory 设置为当前单击的按钮 kit.name 但每次 log() 函数都会记录第一个 kit.name 并且不会更改。

我做错了什么？

谢谢！

Answer 1

ng-repeat 创建自己的作用域。这就是为什么当你做

activeCategory = kit.name;

您实际上并没有更改 $scope.activeCategory，而是 ng-repeat 的 sub-scope 上的变量 activeCategory。

这样 $scope.activeCategory 永远不会真正改变，因此它总是 return 第一个条目。

您要做的就是使用 "dotted" 变量来避免这个问题。这实际上一直受到 google 的鼓励。

尝试这样的事情：

angular.module('myApp')
.controller('AlineacionCtrl', function ($scope, $meteor) {

  $scope.activeIndex = {index: 0};
  $scope.activeCategory = { category: undefined };

  $meteor.subscribe('kits').then(function (){
    $scope.kits = $meteor.collection(Kits, false);
    $scope.activeCategory.category = $scope.kits[0].name;
    console.log($scope.activeCategory.category);
    $scope.log = function (){
      console.log($scope.activeCategory.category);
    };
  });

});

和

<section layout="row" layout-align="center center" layout-wrap ng-init="activeIndex; activeCategory">
  <md-button flex="auto" flex-sm="45" flex-xs="100" ng-repeat="kit in kits | orderBy: 'order'" ng-class="{active: (activeIndex.index == $index)}" class="md-raised">
    <a href="" ng-click="activeIndex.index = $index; activeCategory.category = kit.name; log()" class="bold">{{kit.name}}</a>
  </md-button>
</section>

在此处查看有关此问题的 post： Why don't the AngularJS docs use a dot in the model directive?

以及 ng-model 出现的原因说明： http://excellencenodejsblog.com/angularjs-directive-child-scope-ng-repeat-ng-model/

AngularJS 在 ng-repeat 中更改变量

AngularJS change variable inside an ng-repeat

javascript

mongodb

angularjs

angular-meteor