использование ng-repeat с динамически создаваемыми классами

0

Моя проблема следующая:

При создании документа вручную выполните следующие действия:

<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 даны правильные классы, а при наведении мыши они изменяются, однако при использовании ng-repeat, divs, создаваемые ng-repeat, не содержат динамические классы

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

* Атрибуты model и ctrl являются частью UI lib, с которой я работаю.

Есть ли способ заставить эти divs вести себя как созданные вручную? Спасибо!

EDIT: Я был, вероятно, неясно,

Следующий 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>

Есть ли способ подтолкнуть эти divs к div-модели до того, как страница загрузится, так что когда это произойдет, divs уже существуют и получат правильные классы и т.д.? Спасибо!

  • 0
    ты используешь здесь нг-класс?
  • 0
    Is there any way to push those divs under the wix-model div BEFORE the page loads - я не думаю, что это будет возможно, потому что angularjs - это клиентская среда. Сначала все файлы доставляются на компьютер клиента. В это время ваша wix-model будет создана, после чего запустится angularjs, и ваши данные будут привязаны к ng-repeat. Так что в основном ваши div будут приходить после загрузки страницы. Вы можете использовать любой язык на стороне сервера, например java, php, если вы хотите, чтобы эти div отображались перед загрузкой страницы.

2 ответа

0

Для этого вы можете использовать директиву 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
  • 0
    этот код будет связывать style поэтому стиль будет одинаковым для всех элементов div. Если вы измените его впоследствии, то он изменит класс для всех элементов div с новым значением.
  • 0
    @ RamanSahasi может быть, я не правильно понял вопрос. Я думал, что привязка стиля для всех повторяющихся элементов - это требование и изменение стиля всех элементов, когда произошло событие наведения
0

Хотя я бы рекомендовал вам определить условие или логику для отображения классов. Однако, согласно информации, которую вы предоставили, это решение будет работать хорошо.

<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>

Вы можете легко увидеть, как showhover классы show, hide и showhover.

  • 0
    не работает до сих пор, показывает то же самое, спасибо
  • 0
    @ user4370437 Я обновил код. Пожалуйста, пингуйте меня, если у вас возникнут проблемы.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню