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>

下拉列表中的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库的一部分。

有没有办法让这些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。当您运行以下代码段时，您可以清楚地看到这些类的应用方式。

＆＃13;
＆＃13;
<!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>
＆＃13;
＆＃13;
＆＃13;

<强>输出

<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="0" class="ng-binding ng-scope show"> Show Images </div>  <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>  <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>  </div>

您可以轻松了解如何应用show，hide和showhover类。

Answer 2

您可以使用ng-class指令来实现这一目标。 class1＆amp; 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 个答案: