如何将$ index从ng-repeat绑定到控制器

时间:2016-08-31 02:55:37

标签: angularjs

在Angular中我想将$ index绑定到控制器。如何将$ index值发送到我的控制器。这是我的HTML代码。

<body>
<div class="container">
    <div class="row row-content" ng-controller="demoController as demoCtrl">
    <ul>
    <li ng-repeat="val in demoCtrl.list" >Hello {{$index}}</li>
    </ul>       
    </div>
</div>

这是我的控制器代码

var app = angular.module('confusionApp',[])
app.controller('demoController', function(){
    var list = [1,2,3,4,5];
    this.list = list;

    var array = ['abc','def','ghi','jkl','mno']
    this.array = array
    console.log(this.array[index]);
});

我需要在HTML中使用ng-modal并将该值绑定到我的控制器中的某个变量。

根据索引的选择,它应该检查数组并且各个数组应该打印。 你们中的任何人都可以帮忙吗

3 个答案:

答案 0 :(得分:2)

要在控制器中获取当前的迭代位置,您需要定义一个函数。 所以你的HTML代码就像这样。

<body>
<div class="container">
    <div class="row row-content" ng-controller="demoController as demoCtrl">
    <ul>
    <li ng-repeat="val in demoCtrl.list" ng-click="dispArray($index)">Hello {{$index}}</li>
    </ul>       
    </div>
</div>

您的控制器代码

var app = angular.module('confusionApp',[])
app.controller('demoController', function($scope){
    $scope.dispArray = function(index){
          // console.log(index);
          // your code
    }
});

答案 1 :(得分:1)

根据您要完成的任务,您可以更好地创建自定义迭代器。

function makeIterator(array){
    var nextIndex = 0;

    return {
       next: function(){
           return nextIndex < array.length ?
               {value: array[nextIndex++], done: false} :
               {done: true};
       }
    }
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators

当您使用ngRepeat时,Angular会迭代列表中的所有内容。如果您正在尝试跟踪用户点击的列表项,那么您只需使用$ index将其添加到那里。

<li ng-repeat="val in demoCtrl.list" > 
   <span ng-click="demoCtrl.userClicked($index)"> Hello {{$index}}</span>
</li>

如果您只是想在每个项目中打印数据,那么ng-repeat已经为您迭代了所有内容。

<li ng-repeat="val in demoCtrl.list" > 
   <span ng-click="demoCtrl.userClicked($index)"> Hello {{val}}</span>
</li>

这完全取决于你想要做什么。

答案 2 :(得分:0)

我不知道你想做什么。如果你想使用事件。你可以将$ index传递给你的控制器函数,如:

gcc --version
gcc (GCC) 4.1.2 20080704 (Red Hat 4.1.2-55)

R CMD INSTALL RcppEigen_0.3.1.2.1.tar.gz
installing to /home/cyrildl/R/x86_64-redhat-linux-gnu-library/3.3/RcppEigen/libs
** R
** inst
** preparing package for lazy loading
Error in get(name, envir = asNamespace(pkg), inherits = FALSE) :
  object 'SHLIB.maker' not found
Error : unable to load R code in package ‘RcppEigen’
ERROR: lazy loading failed for package ‘RcppEigen’
* removing ‘/home/cyrildl/R/x86_64-redhat-linux-gnu-library/3.3/RcppEigen’
希望能帮到你。