Моя проблема следующая:
При создании документа вручную выполните следующие действия:
<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 уже существуют и получат правильные классы и т.д.? Спасибо!
Для этого вы можете использовать директиву 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
style
поэтому стиль будет одинаковым для всех элементов div. Если вы измените его впоследствии, то он изменит класс для всех элементов div с новым значением.
Хотя я бы рекомендовал вам определить условие или логику для отображения классов. Однако, согласно информации, которую вы предоставили, это решение будет работать хорошо.
<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
.
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 отображались перед загрузкой страницы.