2016-04-06 18 views
0

Bunun oldukça basit bir soru olduğuna ve forumda bazı çözümler bulduğuma inanıyorum ama herşeyi doğru yaptığım ama yine de yalnızca son değer aldığım görünüyor. Bu basit example'u yazdım. Birisi beni anlatabilir, benim hatam nerede? Bu $scope.parent her zaman üzerine yazılır htmlDöngüsel açısal döngü için son değer döndürür

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

. Mücadele ettiğin problem nedir? – SayusiAndo

+0

@SayusiAndo "Tekel" e tıklarsanız, "Dünya" yı döndürür, bu benim mücadelem – Anton

+0

neden -1? Bu soru açısal başlayanlar için iyidir. – MacKentoch

cevap

2

Kullanım ng-repeat$index adını alır. modeliniz üzerinde döngü Yapma, daha basittir bkz:

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

NOT/tavsiye: Üst kapsam erişim sağlar $parent ile karmaşık hale getirebileceğini beri parent gibi model adını kullanmaktan kaçının.

İkinci durumda

, sen ebeveyn $ indeksi almak zorunda $parent.$index (beri iç içe ng-reapeat) ama aynı hile = array modeli üzerinde hiçbir döngü:

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; 
    } 
+0

Cevabınız için teşekkür ederiz, indeks yuvalanmış dizilerde bile işe yarıyor mu? – Anton

+1

$ dizini, bir dizi modelinin üzerine gelen ng-yinelemenizle ilgilidir. Bu nedenle, kullanım durumları ile sorunuza daha iyi cevap vermek daha kolay olurdu (* çünkü iyi bir cevap önerdiğinden emin değilim *). Ama başka bir tavsiye, bir dizi modelin ilk veya son maddesine ihtiyacınız olduğunda daha iyi $ ilk ve $ son kullanın. Açısal web sitesine bakın, çok iyi belgelenmiştir. – MacKentoch

+0

İç içe dizilmiş dizi, başka bir ng-yineleme iç ng reapeat kullandığınızı varsayalım. Sanırım bunun hakkında konuştun mu? – MacKentoch

0

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

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

, böylece sadece hiç

1

Sen getName() yöntem haline $index geçmesi gereken son değerini olacak .

HTML'iniz

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

Kişisel Kontrolör

Sonra $scope.test diziden doğru değeri almak üzere seçilen nesnenin dizinini kullanırız.

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

$ endeksini kullanmak için $ index ile takip etmenize gerek yok. Sadece performans için takip edin. – MacKentoch

0

Sen getName bir parametre olarak size ng-repeat öğeyi geçebilir (ama derim daha okunabilir olacaktır setName veya 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="[email protected]" 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> 

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; 
     } 
}); 
JS

Plunker

http://plnkr.co/edit/p3PFmQHFmllcXEvL7K0z

0

for döngüsünüz, son öğeye her zaman $scope.parent ayarlar. Bu deneyin:

HTML

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

JS açılan json dosyasında listelenen tüm unsurları içeren örnekte

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