对动态创建的类使用ng-repeat

Question

我的问题如下：

手动创建文档时，如下所示：

<div model="image" ctrl="Dropdown">
    <div value="show">Show Images</div>
    <div value="hide">Hide Images</div>
    <div value="showhover">Show Images on Hover</div>
</div>

为Dropdown内的div提供了正确的类，并且在鼠标悬停时它们会更改，但是，当使用ng-repeat时，由ng-repeat创建的div不包含动态类

<div wix-model="image" wix-ctrl="Dropdown">
  <div ng-repeat="page in pages" value={{$index}}>
    {{page.title}}
  </div>
</div>

* model和ctrl属性是我正在使用的UI lib的一部分。

有没有办法使这些div表现得像手动创建的div？ 谢谢！

编辑：我可能不清楚，

以下HTML，

<div wix-model="image" wix-ctrl="Dropdown">
    <div value="show">Show Images</div>
    <div value="hide">Hide Images</div>
    <div value="showhover">Show Images on Hover</div>
</div>

生成以下HTML：

<div wix-model="image" wix-ctrl="Dropdown" class="dropdown dropdown-style-1 focus-active"><span class="dropdown-arrow dropdown-arrow-down"></span>
    <div class="selected">
        <div data-value="show" data-index="0" class="option current-item">Show Images</div>
    </div>
    <div class="options uilib-scrollbar" style="width: 100%; position: absolute; top: 100%; z-index: 999999; display: block; overflow: auto;">
        <div data-value="show" data-index="0" class="option option-selected dropdown-highlight">Show Images</div>
        <div data-value="hide" data-index="1" class="option">Hide Images</div>
        <div data-value="showhover" data-index="2" class="option">Show Images on Hover</div>
    </div>
</div>

有什么方法可以在页面加载之前将那些div推入wix-model div下，以便当它加载时，div已经存在并且将获得正确的类等？ 谢谢！

Answer 1

尽管我建议您弄清楚呈现类的条件或逻辑。 但是，根据您提供的信息，此解决方案会很好用。

<div wix-model="image" wix-ctrl="Dropdown">
  <div ng-class="{'Show Images':'show', 'Hide Images':'hide', 'Show Images on Hover':'showhover'}[page.title]" ng-repeat="page in pages" value={{$index}}>
    {{page.title}}
  </div>
</div>

编辑

根据您提供的描述，我使用了$scope.pages对象。 当您运行以下代码片段时，您可以清楚地看到如何应用这些类。

 <!DOCTYPE html> <html ng-app="myApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> </head> <body ng-controller="myCtrl"> <div wix-model="image"> <div ng-class="{'Show Images':'show', 'Hide Images':'hide', 'Show Images on Hover':'showhover'}[page.title]" ng-repeat="page in pages" value={{$index}}> {{page.title}} </div> </div> <script> var myApp = angular.module("myApp", []); myApp.controller("myCtrl", ['$scope', function($scope) { $scope.pages = [ {title : 'Show Images', otherprop : 'lorem ipsum'}, {title : 'Hide Images', otherprop : 'lorem ipsum'}, {title : 'Show Images on Hover', otherprop : 'lorem ipsum'} ]; }]); </script> </body> </html>

输出量

<div wix-model="image">
    <!-- ngRepeat: page in pages -->
    <div ng-class="{'Show Images':'show', 'Hide Images':'hide', 'Show Images on Hover':'showhover'}[page.title]" ng-repeat="page in pages" value="0" class="ng-binding ng-scope show">
        Show Images
    </div>
    <!-- end ngRepeat: page in pages -->
    <div ng-class="{'Show Images':'show', 'Hide Images':'hide', 'Show Images on Hover':'showhover'}[page.title]" ng-repeat="page in pages" value="1" class="ng-binding ng-scope hide">
        Hide Images
    </div>
    <!-- end ngRepeat: page in pages -->
    <div ng-class="{'Show Images':'show', 'Hide Images':'hide', 'Show Images on Hover':'showhover'}[page.title]" ng-repeat="page in pages" value="2" class="ng-binding ng-scope showhover">
        Show Images on Hover
    </div>
    <!-- end ngRepeat: page in pages -->
</div>

您可以轻松查看show ， hide和showhover类的应用方式。

Answer 2

您可以使用ng-class指令来实现。 class1和class2是在CSS中定义的类。

<div ng-repeat="page in pages" value={{$index}} ng-class="style">
{{page.title}}
</div>

//Controller Code 
$scope.style = class1;// or class2 according to your requirement

对动态创建的类使用ng-repeat

问题描述

2 个解决方案

解决方案1
0 2016-07-26 08:58:26

解决方案2
0 2016-07-26 08:59:24

对动态创建的类使用ng-repeat

问题描述

2 个解决方案

解决方案1 0 2016-07-26 08:58:26

解决方案2 0 2016-07-26 08:59:24

解决方案1
0 2016-07-26 08:58:26

解决方案2
0 2016-07-26 08:59:24