angular for循环返回最后一个值

angular for loop returns last value

本文关键字：最后一个 返回 循环 for angular      更新时间：2024-01-29

我相信这是一个非常简单的问题，我在论坛上找到了一些解决方案，但看起来我做得很好，但仍然只得到了最后一个值。我写了一个简单的示例。有人可以解释我，我的错误在哪里？

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {
  $scope.name = 'Reinforcement';
                    $http.get('test.json')
                        .success(function (data) {
                            $scope.test = data;
                        });

      $scope.getName = function () {
            for (var i = 0; i < $scope.test.length; i++) {
               $scope.parent = $scope.test[i].name
            }
         }
});

html

   <div class="dropdown category" style="position:relative">
                                    <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Category <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                                <li ng-repeat="objName in test" ng-click="getName()">
                                                    <a href=""> {{objName.name}}</a>
                                                </li>
                                            </ul>
                                </div>
                                {{ parent }}

使用ng-repeat $index获取名称。不要在你的模型上循环，看看它更简单：

<p>Hello {{name}}!</p>
<div class="dropdown category" style="position:relative">
  <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Category <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li ng-repeat="objName in test" ng-click="getName($index)">
        <a href="">       {{objName.name}}</a>
     </li>
   </ul>
 </div>
{{ selectedCategory }}

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {
 $scope.name = 'Reinforcement';
 $http.get('test.json')
     .success(function (data) {
      $scope.test = data;
 });
 $scope.getName = function (index) {
   console.info($scope.test[index].name);
   $scope.selectedCategory = $scope.test[index].name;
 }
});

注意/建议：避免使用像parent这样的模型名称，因为您可能会与$parent混淆，后者提供对父作用域的访问权限。

在第二种情况下，您必须使用$parent.$index获取父$index（因为嵌套了ng-ereaat），但这是相同的技巧=没有循环遍历数组模型：

html:

<ul class="dropdown-menu">
        <li class="dropdown" ng-repeat="entity in entitis" >
            <a class="trigger right-caret">{{ entity }}</a>
            <ul ng-if="entity | filter : 'Main'" class="dropdown-menu sub-menu">
                <li ng-repeat="domain in ast" ng-click="getDomain($parent.$index, $index)">
                    <a href=""> {{domain.name}}</a>
                </li>
            </ul>
        </li>
    </ul>
 </div>    
 {{ items }}
 <br/>
 <br/>
 <p><b>parent index : {{astParentIndex}}</b></p>
 <p><b>index : {{astIndex}}</b></p>

js

  $scope.getDomain = function (parentIndex, index) {
    $scope.astParentIndex = parentIndex;
    $scope.astIndex = index;
    $scope.items = $scope.ast[parentIndex].children;
  }

您需要将$index传递到getName()方法中。

您的HTML

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <div class="dropdown category" style="position:relative">
    <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Category <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li ng-repeat="objName in test track by $index" ng-click="getName($index)">
        <a href=""> {{objName.name}}</a>
      </li>
    </ul>
  </div>                                 
{{ bindedVariable}}
</body>

您的控制器

然后使用所选对象的索引从$scope.test数组中获得正确的值。

$scope.getName = function (index) {
  $scope.bindedVariable= $scope.test[index].name
}

$scope.parent = $scope.test[i].name

这将每一次覆盖$scope.parent，因此它只会是的最后一个值

您可以将ng重复项作为参数传递给getName（但我建议您将其称为setName或selectName，这样更可读）：

HTML

<!DOCTYPE html>
<html ng-app="plunker">
<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
    <div class="dropdown category" style="position:relative">
                                    <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Category <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                                <li ng-repeat="objName in test" ng-click="getName(objName.name)">
                                                    <a href=""> {{objName.name}}</a>
                                                </li>
                                            </ul>
                                </div>
                                {{ parent }}
</body>
</html>

JS

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {
  $scope.name = 'Reinforcement';
                    $http.get('test.json')
                        .success(function (data) {
                            $scope.test = data;
                        });

      $scope.getName = function (name) {
               $scope.parent = name;
         }
});

Plunker

http://plnkr.co/edit/p3PFmQHFmllcXEvL7K0z

for循环总是将$scope.parent设置为最后一个元素。试试这个：

HTML

<li ng-repeat="obj in test" ng-click="getName(obj)">
    <a href="">{{obj.name}}</a>
</li>

JS

$scope.getName = function(obj) {
    $scope.parent = obj.name;
}
相关文章：