如何在ng-repeat中跳过$ index

时间:2021-11-30 20:30:48

Consider the following:

考虑以下:

   <div ng-repeat='quest in quests'>
                        <div ng-switch on="quest.ui.type">
                            <div ng-switch-when="ms-select-single" >
                                <div ms-select-single quest='quest'
                                 quest-num='{{(true)?numInc():return}}'></div>
                            </div>
                            <div ng-switch-when="ms-select-multy">
                                <div ms-select-multy quest='quest'
                                quest-num='{{(true)?numInc():return}}'></div>
                            </div>
                            <div ng-switch-when="ms-date">
                                <div ms-date quest='quest'
                                 quest-num='{{(true)?numInc():return}}'>{{questNo}}</div>
                            </div>
                            <div ng-switch-when="ms-text">
                                <div ms-text quest='quest'
                                quest-num='{{(true)?numInc():return}}'>{{questNo}}</div>
                            </div>
                            <div ng-switch-when="ms-textarea">
                                <div ms-textarea quest='quest'
                                quest-num='{{(true)?numInc():return}}'>{{questNo}}</div>
                            </div>
                            <div ng-switch-when="ms-number">
                                <div ms-number quest='quest'
                                quest-num='{{(true)?numInc():return}}'>{{questNo}}</div>
                            </div>
                            <div ng-switch-when="ms-html">
                                <div ms-html quest='quest'></div>
                            </div>
                        </div>
                    </div>

What should be my true statement in the quest-num='{{(true)?numInc():return}}'>?

在quest-num ='{{(true)?numInc():return}}'>中,我的真实陈述应该是什么?

What i want to achieve is an increment a model value conditionaly when the statement is true, if it's true all the time the program breaks, what should be my true statement here?

我想要实现的是当语句为真时增加模型值conditionaly,如果程序中断时它是真的,那么我的真实陈述应该是什么?

numInc returns a ++ of a num value in the model, initialized first at 0, and when it hits the function it increments, but because i have ng-switch it increments too many times, that's why i need the true/false statement, i think...

numInc在模型中返回num值的++,首先在0处初始化,当它到达函数时它会递增,但因为我有ng-switch它增加了太多次,这就是为什么我需要true / false语句,我认为...

2 个解决方案

#1


2  

I'm not sure I understood your question but if you wanted something like this

我不确定我理解你的问题,但如果你想要这样的话

     Label    Actual $index value
Question 1    0
              1
Question 2    2
Question 3    3
         etc...

Then we can use a directive. Here's a quick sketch

然后我们可以使用指令。这是一个快速草图

var app = angular.module('app', []);

app.controller('MainController', function($scope){
    $scope.arr = [{name:'John', phone:'555-1276'},
     {name:'Mary', phone:'800-BIG-MARY'},
     {name:'Mike', phone:'555-4321', countMe:false},
     {name:'Adam', phone:'555-5678'},
     {name:'Julie', phone:'555-8765'},
     {name:'Juliette', phone:'555-5678', countMe:false}]
});

app.directive('conditionalNumberDirective', function(){
    var counter = 0;
    return {
      restrict: 'A',
      link: function(scope, el, attr) {
        // config what is item and what is coutMe via attrs here 
        if(scope.$index === 0) {
          counter = 1;
        }
        scope.counter = counter;
        if(angular.isDefined(scope.item) && angular.isDefined(scope.item.countMe) && !scope.item.countMe) {
          scope.counter = null;
        }else {
          counter++
        }
      }
    }
});

Html would look something like

Html看起来像

<div ng-controller="MainController">
    <input type="text" ng-model="search"/>
    <div ng-repeat="item in arr | filter:search"  conditional-number-directive>
  Index:{{$index}} {{item}} - Label:{{counter}}
    </div>
</div>

#2


0  

Instead of $index use a ng-model variable. You could try something like this also(ternary):

而不是$ index使用ng-model变量。你也可以尝试这样的东西(三元):

 {{ true ? true : false }}

while assigning the value.

在分配价值时。

#1


2  

I'm not sure I understood your question but if you wanted something like this

我不确定我理解你的问题,但如果你想要这样的话

     Label    Actual $index value
Question 1    0
              1
Question 2    2
Question 3    3
         etc...

Then we can use a directive. Here's a quick sketch

然后我们可以使用指令。这是一个快速草图

var app = angular.module('app', []);

app.controller('MainController', function($scope){
    $scope.arr = [{name:'John', phone:'555-1276'},
     {name:'Mary', phone:'800-BIG-MARY'},
     {name:'Mike', phone:'555-4321', countMe:false},
     {name:'Adam', phone:'555-5678'},
     {name:'Julie', phone:'555-8765'},
     {name:'Juliette', phone:'555-5678', countMe:false}]
});

app.directive('conditionalNumberDirective', function(){
    var counter = 0;
    return {
      restrict: 'A',
      link: function(scope, el, attr) {
        // config what is item and what is coutMe via attrs here 
        if(scope.$index === 0) {
          counter = 1;
        }
        scope.counter = counter;
        if(angular.isDefined(scope.item) && angular.isDefined(scope.item.countMe) && !scope.item.countMe) {
          scope.counter = null;
        }else {
          counter++
        }
      }
    }
});

Html would look something like

Html看起来像

<div ng-controller="MainController">
    <input type="text" ng-model="search"/>
    <div ng-repeat="item in arr | filter:search"  conditional-number-directive>
  Index:{{$index}} {{item}} - Label:{{counter}}
    </div>
</div>

#2


0  

Instead of $index use a ng-model variable. You could try something like this also(ternary):

而不是$ index使用ng-model变量。你也可以尝试这样的东西(三元):

 {{ true ? true : false }}

while assigning the value.

在分配价值时。