I've a ng repeater and I defined a list item template for an article list page:
<ul class="article_list">
<li ng-repeat="article in articles | filter:search">
<a href="#" title="article title here">
<span class="date">
<span class="month">{{ article.dt_month }}</span>
<span class="day">{{ article.dt_day }}</span>
<span class="year">{{ article.dt_year }}</span>
</span>
<img src="images/news/{{ article.id }}.jpg" alt="{{ article.title }}" class="thumb" />
<div class="summary">
<span class="article_title">{{ article.title }}</span>
<span class="short">{{ article.content }}...</span>
</div>
</a>
</li>
<li ng-show="(articles | filter:search).length==0">No article found</li>
</ul>
When I checked the console I see 404 not found error for the file images/news/{{article.id}}.jpg
How can I prevent this issue?
Thanks
Use ng-src instead of src for image resources. That way the browser will load it when model data is available.
Related
I have a plunker example with this plugin
Angular Multi Level Menu
Index.html
<input type="text" ng-model="search">
<wxy-push-menu menu="menu" options="options"></wxy-push-menu>
SubMenu.html
<div ng-show="visible" ng-class="{visible: visible, multilevelpushmenu_inactive: inactive && !collapsed}" class="levelHolderClass">
<h2><i class="floatRight cursorPointer" ng-class="menu.icon" ng-click="openMenu($event, menu)"></i>{{menu.title}}</h2>
<div ng-show="level != 0 && !inactive" ng-class="options.backItemClass">
<a href="#" ng-click="goBack($event, menu)">
<i class="floatRight" ng-class="options.backItemIcon"></i><span ng-bind="options.backText"></span>
</a>
</div>
<ul ng-class="{invisible: inactive}">
<li ng-repeat="item in menu.items | filter: search">
<a ng-href="{{item.link}}" ng-click="onSubmenuClicked(item, $event)">
<i ng-if="item.menu" class="floatLeft iconSpacing" ng-class="options.groupIcon"></i>
<i class="floatRight" ng-class="item.icon"></i>{{item.name}}
</a>
<div ng-if="item.menu">
<recursive><wxy-submenu menu="item.menu" level="childrenLevel" visible="item.visible"></wxy-submenu></recursive>
</div>
</li>
</ul>
Any idea why the filter not work?
Plunker Code
I'm building an accordion and came across bootstrap's "Collapse".
collapse="isCollapsed"
When I load the page, the "Shared connections" panel is open by default, I'm wanting to have all panels "Shared connections" & "Other connections" closed by default until the user interacts with them.
Through my research so far, I haven't seen this done.
Here is my code:
<div class="col-xs-12">
<div class="connections-wrap" ng-click="isCollapsed = !isCollapsed">
<span class="connection-amount">3</span>
<span class="connection-type">Shared connections</span>
<i class="vf-i"></i>
</div>
<ul class="connections-list" collapse="isCollapsed">
<li>
<span class="connection-device">Eddie Benson Tablet</span>
<span class="connection-number">021 019 17338</span>
</li>
<li>
<span class="connection-device">Eddie Work Phone</span>
<span class="connection-number">021 019 17343</span>
</li>
<li>
<span class="connection-device">Eddie Work Android</span>
<span class="connection-number">021 019 17339</span>
</li>
</ul>
<div class="connections-wrap">
<span class="connection-amount">2</span>
<span class="connection-type">Other connections</span>
<i class="vf-i"></i>
</div>
</div>
Here is the solution - required ng-init="true" as collapse isn't being initialised on load.
ng-init="isCollapsed = true"
In my application there is a carousel with images that I get from my service. Under the carousel there are 3 buttons that give more information about the image.
These information buttons should replace the bullet indicators for a standard carousel. The buttons get an active class when the corresponding image is displayed so it stands out from the other 2.
Below is my code, I'm using this carousel
<ul rn-carousel>
<li ng-repeat="promo in promos">
<img ng-src="{{ promo.slider[0].slide }}" alt="{{ promo.name }}">
</li>
</ul>
<div ng-repeat="promo in promos">
<button>
<h2>{{ promo.name }}</h2>
<p>- {{ promo.descr }} <span>{{ promo.disc }}</span></p>
</button>
</div>
I have no problems getting the info out of my service, it's just the linking part that is giving me problems.
I found the solution after searching through the issues page of the carousel I'm using.
<ul rn-carousel rn-carousel-index="currentSlide">
<li ng-repeat="promo in promos">
<img ng-src="{{ promo.slider[0].slide }}" alt="{{ promo.name }}">
</li>
</ul>
<div ng-repeat="promo in promos">
<button ng-class="{activeBtn: $index==$parent.currentSlide}" ng-click="$parent.currentSlide = $index">
<h2>{{ promo.name }}</h2>
<p>- {{ promo.descr }} <span>{{ promo.disc }}</span></p>
</button>
</div>
I had to name my carousel-index and for my indicators I had to refer to the parent element for the binding to work.
Thanks to Capricorn for leading the way.
(please do not update the english grammer in this question/ I wont be able to approve it and this question wont get resolved.)
This is my UI
It contains various li elements whose values are populated using this angular html
<div class="row">
<li class="no-bullet-li li-12 monaco-font"> {{selectedChangeEligibilityPlan}}</li>
<ul class="ul-plan-1">
<li class="no-bullet-li" ng-repeat="plan in fewThings">
<div ng-class="{ 'selected-class-name': $index == selectedIndex }" ng-click="itemClicked($index)" class="li-alt monaco-font"> p2|{{plan.planName}} | {{plan.planId}}
<a class="iconing-sub" ng-click="addClick(item)" href=""><i class="glyphicon glyphicon-plus"></i></a>
<a ng-click="deleteClick(item)" ng-class="{ active : active.one }" href=""><i class="glyphicon glyphicon-remove iconing_1-sub"></i></a>
</div>
<ul class="ul-plan">
<li class="no-bullet-li li-8 monaco" ng-repeat="item in plan.planIds">
p1| {{ plan.planNames[$index]}} | {{item}}
<a <a ng-click="editClick(item)" href=""><i class="glyphicon glyphicon-pencil iconing"></i></a>
<a ng-click="deleteClick(item)" href=""><i class="glyphicon glyphicon-remove iconing_1"></i></a>
</li>
</ul>
</li>
</ul>
</div>
It uses the nested ng-repeat.
The whole UI is contained within a one controller ( no directives used)
the following code gets triggered when someone clicks the blue lis.
$scope.itemClicked = function ($index) {
console.log($index);
// console.log($(item).closest('li') );
$scope.selectedIndex = $index;
};
here's how to ui looks and its great.
problem arises when I try to do the same logic for the pink ones (nested ng-repeat li). It selects other pink lis in all the other stack too.
here's the screenshot.
second part of question:
I have I have the above UI plus I also have this second UI that is loaded along with this on the same page. It contains a bunch of horizontal rows.
Once the user click the blue pink colored lis it goes into the active state. Then the user can click the row which he likes. upon clicking it the plan name of currently selected li will get replaced.
Here is the html for it.
<div class="row">
<li class="no-bullet-li li-12 monaco-font"> {{selectedChangeEligibilityPlan}}</li>
<ul class="ul-plan-1">
<li class="no-bullet-li" ng-repeat="plan in fewThings">
<div class="li-alt monaco-font"> p2|{{plan.planName}} | {{plan.planId}}
<a class="iconing-sub" ng-click="addClick(item)" href=""><i class="glyphicon glyphicon-plus"></i></a>
<a ng-click="deleteClick(item)" ng-class="{ active : active.one }" href=""><i class="glyphicon glyphicon-remove iconing_1-sub"></i></a>
</div>
<ul class="ul-plan">
<li ng-class="{ 'selected-class-name': $index == selectedIndex }" ng-click="itemClicked($index)" class="no-bullet-li li-8 monaco" ng-repeat="item in plan.planIds">
p1| {{ plan.planNames[$index]}} | {{item}}
<a ng-click="editClick(item)" href=""><i class="glyphicon glyphicon-pencil iconing"></i></a>
<a ng-click="deleteClick(item)" href=""><i class="glyphicon glyphicon-remove iconing_1"></i></a>
</li>
</ul>
</li>
</ul>
</div>
The problem lies in the fact that you are trying to save the state of the data (which one is selected) inside your controller using $index. The $index property isn't unique among different ng-repeats, so when you set your $scope.selectedIndex to $index, each of your sub lists will see that their $index matches, and so will each trigger the ng-class and add the selected-class-name class.
What you could do instead is have each item in the data have a unique index and use that id to store which item is selected in $scope.selectedIndex.
<ul class="ul-plan">
<li ng-class="{ 'selected-class-name': item.id == selectedIndex }" ng-click="itemClicked(item.id)" class="no-bullet-li li-8 monaco" ng-repeat="item in plan.planIds">
p1| {{ plan.planNames[$index]}} | {{item}}
<a ng-click="editClick(item)" href=""><i class="glyphicon glyphicon-pencil iconing"></i></a>
<a ng-click="deleteClick(item)" href=""><i class="glyphicon glyphicon-remove iconing_1"></i></a>
</li>
</ul>
This line looks strange.
<a ng-click="select('one')" href="">
Did you really mean to pass a hardcoded 'one' to the function? Or was it supposed to be the index, like the deleteClick() call.
I am trying to display equal containers with image (that can be submitted with a different size, but resized to a fix size when displayed), and some content (title description, etc) -- similar to the Kickstarter's tiles of projects (https://www.kickstarter.com/discover/categories/technology?ref=discover_index). I tried columns, tables, container, but looks like I am missing something, because it doesn't want to display equal tiles :(((( HELP!
Here is my last "try"
<ul ng-repeat="project in projects" class="col-md-4 col-l-3 col-xl-2" id="wrap">
<a href="project.html?={{project.objectId}}" id="projectText">
<li><img class="img-responsive" src="{{project.image.url}}"></li>
<li>{{project.title}}</li>
<li>{{project.blurb}}</li>
<li>{{project.likes || 0}}</li>
<li><span id="hover" class="glyphicon glyphicon-thumbs-up" ng-click="incrementLikes(project, 1)"></span></li>
</a>
</ul>
I did a quick test and it looks as though you can have col-*-x tags that add up to more than 12, in which case this will work
<div class="row">
<div ng-repeat="project in projects">
<div class="col-md-4 col-l-3 col-xl-2">
<ul>
<a href="project.html?={{project.objectId}}" id="projectText">
<li><img class="img-responsive" src="{{project.image.url}}"></li>
<li>{{project.title}}</li>
<li>{{project.blurb}}</li>
<li>{{project.likes || 0}}</li>
<li><span id="hover" class="glyphicon glyphicon-thumbs-up" ng-click="incrementLikes(project, 1)"></span></li>
</a>
</ul>
</div>
</div>
</div>