HTML

Question

我相信这是一个非常简单的问题，我在论坛上找到了一些解决方案，但看起来我做的一切都正确，但仍然只获得最后的价值。我已经写了这个简单的 Getting Chrome to accept self-signed localhost certificate 。有人可以解释一下，我的错误在哪里？

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

Answer 1

使用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（自嵌套的ng-reapeat ）获得父$ index，但它是相同的技巧=没有循环数组模型：

<强> 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 }} parent index : {{astParentIndex}} index : {{astIndex}}

<强> JS

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

Answer 2

您可以将ng-repeat项目作为参数传递给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

Answer 3

您的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;
}

angular for循环返回最后一个值

3 个答案:

HTML

JS

Plunker