Question

编辑：我原来的问题不够好，所以现在就编辑了。

嗨，我是角色新手，我试图显示自定义布局我的数据列表与ng-repeat。我不能使用ng-class，因为我也希望显示不同的模型vaules。我在我的控制器中实现了一个函数，它根据我想要的设计计算真或假。然后我尝试使用ng-if来显示我想要的HTML数据。我实现的方式似乎有点尴尬，特别是如果布局变得更复杂，有没有更好的方法来实现这种行为？这里有一个示例：http://plnkr.co/edit/puE7OE?p=info

控制器：

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

app.controller('MainCtrl', function($scope) {
   $scope.eventModels=[{name:'event1', description: 'description1'}, {name:'event2', description: 'description2'}, 
   {name:'event3', description: 'description3'}, {name:'event4', description: 'description4'}, 
   {name:'event5', description: 'description5'}, {name:'even6', description: 'description6'}, {name:'even7', description: 'description7'}];

    var counter = 0;
    this.isLarge = false;
    $scope.isLargeContainer = function() {
         if(counter === 0) {
            this.isLarge = true;
            counter++;
        } else {
            this.isLarge = false;
            if(counter === 2) {
                counter = 0;
            } else {
                counter++;
            }
        }
    };
});

查看：

<body ng-controller="MainCtrl">
   <section ng-repeat="(key, eventModel) in eventModels" >
    <div ng-init="isLargeContainer(eventModel)"></div> <!--the only way I found to call a function within the repeat directive.-->

        <div ng-if="isLarge">
            <!--Display large content -->
            <p class='large'>my large event: {{eventModel.name}}, {{eventModel.description}}</p>
        </div>

        <div ng-if="!isLarge">
            <!--Display content small-->
            <p class='small'>{{eventModel.name}}</p>
        </div>
    </section>
  </body>

提前多多感谢！我正在使用Anguler 1.3.3

Answer 1

我刚刚解决了你的问题。你可以在这里找到解决方案：

http://jsfiddle.net/anasfirdousi/46saqLmw/

这是HTML

var myApp = angular.module('myApp',[]);

function myController($scope){

$scope.msg = 'Learning Angular JS ng-class Directive';
    $scope.menu = [ 'Menu Item 1','Menu Item 2','Menu Item 3','Menu Item 4'];


    
    
}

.large {
    font-size:16px;
    
}

body{
font-size:12px;    

}

<div ng-app="myApp" ng-controller="myController">
    {{ msg }}

    <ul>    
        <li ng-repeat="(key, value) in menu"  ng-class="{'large': $index==2 }">  {{ value }} </li>
    </ul>
   

</div>

在您的情况下，您实际上必须使用带表达式的ng-class。仅当条件成立时才应用该类。

Answer 2

http://jsfiddle.net/anasfirdousi/cuo6cn3L/

检查以上链接。如果您想在任何特定条件下执行此操作，这是另一个示例。您可以调用一个检查条件的函数，并返回true或false，而不是使用内联表达式。

var myApp = angular.module('myApp',[]);

function myController($scope){

$scope.msg = 'Learning Angular JS ng-class Directive';
    $scope.menu = [ 'Menu Item 1','Menu Item 2','Menu Item 3','Menu Item 4'];
    $scope.CheckSometing =  function(v){
        
        
        if(v=='Menu Item 3'){
             return true;   
        }
        else
        {
            return false;
        }
            
    }

    
    
}

.large {
    font-size:16px;
    
}

body{
font-size:12px;    

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
    {{ msg }}

    <ul>    
        <li ng-repeat="(key, value) in menu"  ng-class="{'large': CheckSometing(value)  }">  {{ value }} </li>
    </ul>
   

</div>

如何使用ng-repeat显示自定义布局

2 个答案: