I would like to do something like ng-repeat="statement in {{ range }}Statements" where range is a ui param value that can be pos, neu and neg depending on the URL:
/#/sidemenu-statements/1/pos
/#/sidemenu-statements/1/neg
/#/sidemenu-statements/1/neu
It would allow me to consolidate the three lists below... is it possible to do this?
If not what would be a better approach?
statements.view.html
<div ng-controller="StatementsController">
<!-- List of positive statements -->
<div class="list card" ng-repeat="statement in posStatements | orderBy: '-timestamp'" ng-if="range==='pos'">
<div class="item item-icon-left">
<i class="icon {{ statement.accountIcon }}"></i>
<h2>{{ statement.accountTag }}</h2>
<span am-time-ago="{{ statement.timestamp }}"></span>
</div>
<div class="item item-body">
<span>{{ statement.statement }}</span>
<div align="center"><p>We've assessed this post as <strong>{{ range }}</strong>. What do you think?</p></div>
</div>
<div class="button-bar">
<a class="button button-balanced"><i class="icon ion-happy"></i></a>
<a class="button button-dark">Skip</a>
<a class="button button-assertive"><i class="icon ion-sad"></i></a>
</div>
</div>
<!-- List of neutral statements -->
<div class="list card" ng-repeat="statement in negStatements | orderBy: '-timestamp'" ng-if="range==='neu'">
<div class="item item-icon-left">
<i class="icon {{ statement.accountIcon }}"></i>
<h2>{{ statement.accountTag }}</h2>
<span am-time-ago="{{ statement.timestamp }}"></span>
</div>
<div class="item item-body">
<span>{{ statement.statement }}</span>
<div align="center"><p>We've assessed this post as <strong>{{ range }}</strong>. What do you think?</p></div>
</div>
<div class="button-bar">
<a class="button button-balanced"><i class="icon ion-happy"></i></a>
<a class="button button-dark">Skip</a>
<a class="button button-assertive"><i class="icon ion-sad"></i></a>
</div>
</div>
<!-- List of negative statements -->
<div class="list card" ng-repeat="statement in negStatements | orderBy: '-timestamp'" ng-if="range==='neg'">
<div class="item item-icon-left">
<i class="icon {{ statement.accountIcon }}"></i>
<h2>{{ statement.accountTag }}</h2>
<span am-time-ago="{{ statement.timestamp }}"></span>
</div>
<div class="item item-body">
<span>{{ statement.statement }}</span>
<div align="center"><p>We've assessed this post as <strong>{{ range }}</strong>. What do you think?</p></div>
</div>
<div class="button-bar">
<a class="button button-balanced"><i class="icon ion-happy"></i></a>
<a class="button button-dark">Skip</a>
<a class="button button-assertive"><i class="icon ion-sad"></i></a>
</div>
</div>
<div>
I would do the following:
ng-repeat="statement in getStatements(range)"
and add this function in the controller (you can use a switch/case structure if you're not a fan of the string concatenation):
$scope.getStatements = function(range) {
return $scope[range + "Statements"];
};
Related
I'm trying to show active bootstrap accordion in a laravel foreach loop, but I'm facing an issue.
What I'd like to do is what you see on the top image. But when I refresh the browser, the accordion closes as you can see on the bottom image.
Here's my code :
<div class="course-dashboard-side-content">
#foreach ($formation->sections as $section)
#php
$increment++;
#endphp
<div class="accordion course-item-list-accordion" id="accordionCourseMenu">
<div class="card">
<div class="card-header" id="collapseMenuOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse"
data-target="#collapseSection-{{ $section->id }}" aria-expanded="false"
aria-controls="collapseOne">
<span class="widget-title font-size-15 font-weight-semi-bold">Section
{{ $increment }}: {{ $section->name }}</span>
<div class="course-duration">
<span>{{ $section->courses->count() }} Vidéos </span>
<span>Durée Totale</span>
</div>
</button>
</h2>
</div>
<div id="collapseSection-{{ $section->id }}" class="collapse" aria-labelledby="collapseMenuOne" data-parent="#accordionCourseMenu">
<div class="card-body">
<div class="course-content-list">
<ul class="course-list">
#foreach ($section->courses as $course)
#php
$increment2++;
#endphp
<li class="course-item-link {{ $loop->first ? 'active' : '' }}">
<div class="course-item-content-wrap">
<div class="custom-checkbox">
<input type="checkbox" id="chb29">
<label for="chb29"></label>
</div>
<div class="course-item-content">
<h4
class="widget-title font-size-15 font-weight-medium">
{{ $increment2 }}.
<a href="{{ route('student.course.chapitre', [
$formation->slug,
'course' => $course->slug,
'id' => $section->id,
]) }}">
{{ $course->name }}
</a>
</h4>
<div class="courser-item-meta-wrap">
<p class="course-item-meta"><i
class="la la-play-circle"></i>Durée</p>
#if ($course->document)
<div class="msg-action-dot">
<div class="dropdown">
<a class="theme-btn theme-btn-light"
href="#" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-folder-open mr-1"></i>
Document<i
class="fa fa-angle-down ml-1"></i>
</a>
</div>
</div>
#else
#endif
</div>
</div>
</div>
</li>
#endforeach
</ul>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
Also, is there a way to make the li active?
I tried different ways, but I failed.
<ul class="faq-list">
#forelse ($faqs as $faq)
<li>
<div data-bs-toggle="collapse" class="collapsed question" href="#faq{{ $faq->id }}">{{ $faq->question }}<i class="bi bi-chevron-down icon-show"></i><i class="bi bi-chevron-up icon-close"></i></div>
<div id="faq{{ $faq->id }}" class="collapse" data-bs-parent=".faq-list">
<p>
{{ $faq->answer }}
</p>
</div>
</li>
#empty
<div>No Questions Found</div>
#endforelse
</ul>
I'm having a little difficulty modifying this menu.
Currently it finds itself in following order:
Popular Albums Popular Genres Top 50 New Releases
But I wanted to add another button called HOME. Then the menu would look like this:
Home Popular Albums Popular Genres Top 50 New Releases
But besides modifying the page that contains the menu, I have to modify the file min.js - thing that I do not do the minina idea where to begin.
I'll attach the two codes.
left-panel.html
<section id="left-panel" class="togglable-sidebar" ng-class="{ closed: isPhone }">
<div ng-controller="PlaylistModifyController" class="left-panel-inner">
<div class="content" pretty-scrollbar>
<a ui-sref="home" class="logo hidden-phone"><img ng-src="{{ utils.getLogoUrl('light') }}" alt="logo"></a>
<div class="search-bar">
<input type="text" placeholder="{{:: 'search' | translate }}..." ng-model="search.query" ng-model-options="{ debounce: 400 }" ng-change="search.getResults(search.query)" on-enter="search.viewAllResults()">
<i class="icon icon-spin6 spin search-bar-spinner" ng-if="search.ajaxInProgress"></i>
<i class="icon icon-cancel-1 search-bar-clear" ng-click="search.clearQuery()" ng-if="!search.ajaxInProgress && search.query.length"></i>
</div>
<div class="main-menu">
<div class="menu-item" ui-sref="phone-search" ui-sref-active="active" ng-if="isPhone">{{:: 'search' | translate }}</div>
<div class="menu-item" ui-sref="top-albums" ui-sref-active="active"><i class="icon icon-thumbs-up"></i> {{:: 'popularAlbums' | translate }}</div>
<div class="menu-item" ui-sref="popular-genres" ui-sref-active="active"><i class="icon icon-tags"></i> {{:: 'popularGenres' | translate }}</div>
<div class="menu-item" ui-sref="top-songs" ui-sref-active="active"><i class="icon icon-fire"></i> {{:: 'top50' | translate }}</div>
<div class="menu-item" ui-sref="new-releases" ui-sref-active="active"><i class="icon icon-cd"></i> {{:: 'newReleases' | translate }}</div>
</div>
<div class="divider"></div>
<div class="current-user-widget" ng-if="users.current">
<img ng-src="{{ users.getAvatar() }}"/>
<a class="user-email" ui-sref="user({id:users.current.id})">
{{ users.getUsername() }}
</a>
<div class="dropdown-container" dropdown>
<i class="icon icon-cog edit-profile dropdown-trigger"></i>
<div class="dropdown-menu hidden">
<div class="dropdown-item" ng-if="users.current.isAdmin" ui-sref="admin.analytics"><i class="icon icon-gauge"></i>{{:: 'adminArea' | translate }}</div>
<div class="dropdown-item" ng-click="users.showAccountSettingsModal($event)"><i class="icon icon-pencil"></i> {{:: 'accountSettings' | translate }}</div>
<div class="dropdown-item" ng-click="users.showAccountSettingsModal($event, 'avatar')"><i class="icon icon-emo-sunglasses"></i> {{:: 'changeAvatar' | translate }}</div>
<div class="dropdown-item" ng-click="users.showAccountSettingsModal($event, 'password')"><i class="icon icon-lock"></i> {{:: 'changePassword' | translate }}</div>
<div class="dropdown-item" ng-click="users.logout()"><i class="icon icon-login"></i> {{:: 'logOut' | translate }}</div>
</div>
</div>
</div>
<div class="login-btns" ng-if="!users.current">
<button class="primary login-btn" ui-sref="login">{{:: 'login' | translate }}</button>
<button class="cancel register-btn" ui-sref="register" ng-if="utils.getSetting('enableRegistration')">{{:: 'register' | translate }}</button>
</div>
<div class="your-music">
<h2>{{:: 'yourMusic' | translate }}</h2>
<div class="menu-item" ui-sref="songs" ui-sref-active="active"><i class="icon icon-note"></i> {{:: 'songs' | translate }}</div>
<div class="menu-item" ui-sref="albums" ui-sref-active="active"><i class="icon icon-cd"></i> {{:: 'albums' | translate }}</div>
<div class="menu-item" ui-sref="artists" ui-sref-active="active"><i class="icon icon-mic"></i> {{:: 'artists' | translate }}</div>
</div>
<div class="divider"></div>
<div class="playlists-container">
<div class="playlists">
<h2>
{{:: 'playlists' | translate }}
<i class="icon icon-plus" tooltips tooltip-title="{{:: 'newPlaylist' | translate }}" ng-click="openNewPlaylistModal()"></i>
</h2>
<div class="playlists-list">
<div class="menu-item" ng-repeat="playlist in playlists.all" ui-sref="playlist({id:playlist.id})" ui-sref-active="active"><i class="icon icon-note"></i> {{ playlist.name }}</div>
</div>
</div>
</div>
</div>
<div class="current-track" ng-show="player.currentTrack" ng-controller="ExternalPlayerControlsController">
<img ng-src="{{ utils.img(player.currentTrack.image, 'album') }}">
<div class="info">
<div class="track-name" title="{{ player.currentTrack.name }}">{{ player.currentTrack.name }}</div>
<div class="artist-name">
<all-track-artists artists="player.currentTrack.artists"></all-track-artists>
</div>
</div>
<div class="add-remove" ng-class="{ saved: trackSaved(player.currentTrack) }">
<i class="icon icon-plus add-track" ng-click="addTrack(player.currentTrack)"></i>
<i class="icon icon-cancel-1 remove-track" ng-click="removeTrack(player.currentTrack)"></i>
<i class="icon icon-ok track-added" ng-click="removeTrack(player.currentTrack)"></i>
</div>
</div>
</div>
</section>
I'm working on a project, it was working normally. But then I had to add Iron-Router to add some features and one of my templates do not work anymore.
I have this home.html file, that import two templates, "nova" and "piadas". But only the "nova" is displayed. How do I fix it?
home.html:
<template name="home">
<br>
{{> nova}}
<div class="fixed-action-btn horizontal">
<a class="btn-floating btn-large green accent-4"> <i class="large material-icons">person</i> </a>
<ul>
<li><a class="btn-floating green accent-4"><i class="material-icons">add</i></a></li>
<li><a class="btn-floating green accent-4"><i class="material-icons">account_circle</i></a></li>
</ul>
</div>
<br>
{{> piadas}}
</template>
piadas.html:
<template name="piadas">
<div class="row"> {{#each piadas}}
<div class="col s12 m6">
<div class="card grey lighten-4">
<div class="card-content black-text"> <span class="card-title">{{titulo}}</span>
<p class="truncate">{{piada}}</p>
</div>
<div class="card-reveal"> <span class="card-title grey-text text-darken-4">{{titulo}}<i class="material-icons right">close</i></span>
<p>Essa piada foi enviada por <strong>{{autor}}</strong> no dia <strong>{{formataData}}</strong>.</p>
<button id="btn-like" class="btn" style="float: left;"><i class="material-icons ">thumb_up</i></button>
<button id="btn-denunciar" class="btn btn-danger" style="float: right;"><i class="material-icons ">flag</i></button>
</div>
<div class="card-action"> <i class="material-icons right">more_vert</i> </div>
</div>
</div> {{/each}} </div>
</template>
I've discovered that: how the "piadas" template was returning a helper function with some MongoDB querys, I had to pass the querys for the router.
I want to show comments array data in html but it is not showing data properly. What should I do? Data is showing same like in comments array. What am I doing wrong? What should I do?
<ul class="media-list" ng-controller="dishDetailController as menuCtrl">
<li class="media" ng-repeat="dish in menuCtrl.dishes">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span>
</h2>
<p>{{dish.description}}</p>
</div>
<div class="col-xs-9 col-xs-offset-1">
<p><strong>Customers Comment </strong>
sort by: <input type="text" ng-model="dish.comment">
</p>
<blockquote>
<p>{{dish.comments }}</p>
<footer> <cite title="Source Title "></cite></footer>
</blockquote>
</div>
var dishes=[
{
name:' Salad with Eggs',
image:'images/image-2.jpg',
label:'Delicous',
price:'10',
description:' Health salad with eggs and wonder taste with reasonable price !',
comments:[
{
rating:5,
comment:'',
author:'John Doe',
date:Date
}
],
https://i.stack.imgur.com/2e35Y.jpg
you should use ng-repeat to iterate through the array and show relevant data from the array elements:
<blockquote ng-repeat="comment in dishes.comments">
<p>{{comment.comment}}</p>
<p>{{comment.author}}</p>
<footer> <cite title="Source Title "></cite></footer>
</blockquote>
EDIT:
Here is a demo
Your ng-repeat should be like this,
<ul class="media-list" ng-controller="dishDetailController">
<li class="media" ng-repeat="dish in dishes">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail" ng-src={{dish.image}} alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
</div>
<div class="col-xs-9 col-xs-offset-1">
<blockquote>
<p><strong>Customers Comment </strong> sort by:
<input type="text" ng-model="comment">
</p>
<blockquote ng-repeat="eachline in dish.comments | filter:comment">
<p>{{eachline.comment}}</p>
<p>{{eachline.author}}</p>
<footer> <cite title="Source Title "></cite></footer>
</blockquote>
</blockquote>
</div>
</li>
</ul>
DEMO
I guess you want something like this.
<blockquote>
<p> {{dish.comments.rating }}</p>
<p> {{dish.comments.comment }}</p>
<p> {{dish.comments.author }}</p>
<p> {{dish.comments.date | date: 'dd/MM/yyyy' }}</p>
</blockquote>
<div class="row row-content" ng-controller="DishDetailController as DishCtrl">
<div class=" col-xs-12 "> <div class="media ">
<div class="media-left media-middle ">
<a href="# ">
<img class="media-object img-thumbnail " ng-src={{dish.image}} alt="Uthappizza ">
</a>
</div>
<div class="media-body ">
<h2 class="media-heading ">{{dish.name}}
<span class="label label-danger ">{{dish.label}}</span>
<span class="badge ">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
</div>
</div>
</div>
<div class="col-xs-9 col-xs-offset-1">
<ul class="list-inline">
<li>
<h2>customer comments </h2>
</li>
<li>Sort by: <input type="text" ng-model="query"></li>
</ul>
<ul class="list-unstyled">
<li ng-repeat="comment in dish.comments | orderBy:query">
<blockquote>
<p> {{comment.rating}} stars</p>
<p>{{comment.comment}}</p>
<footer>{{comment.author}} ,{{comment.date | date:'MMM,dd,yyyy'}}</footer>
</blockquote>
</li>
</ul>
</div>
I want to repeat items as shown in the image. I have done repeating by using ng-repeat. All contents are repeated but not in a structure that is shown in the image. how to split the contents like this.. ???
<div class="activityCon" ng-repeat="activity in activity1">
<!--image-->
<div class="n-col erpSub"> <a class="link brand erp-display-block fk-uppercase erp-text-center" href="#">
<div class="bg-gradient"> <span class="fa fa-chevron-down"></span> </div>
<p class="title erp-font-15">{{ activity }}<br>
<span></span></p>
</a>
</div>
<!--image-->
<div class="clearfix"></div>
<!--1st content wrap-->
<div class="col-md-6 warpLine1 msg-time-chat" ng-class="$odd ? 'col-md-6' : '' " >
<!--message content - 1 -->
<div class="message-body msg-in" ng-repeat="activityDesc in dailyActivity[$index].activityArray">
<div class="text col-md-11 firstWrap" > <img class="img-thumbnail" src="{{activityDesc.taskImage}}" alt=""> <span class="label label-info">{{activityDesc.taskName}}</span>
<p>{{ activityDesc.taskMessage }}</p>
<p class="chat_message_date">{{activityDesc.taskUser}} <span> {{activityDesc.taskDate}} , {{activityDesc.taskTime}}</span></p>
</div>
</div>
<div class="clearfix"></div>
<!--message content - 1 -->
</div>
<!-- <div class="col-md-6 WarpLine2 msg-time-chatRight">
<div class="message-body msg-in" ng-if="$odd" ng-repeat="activityDesc in dailyActivity[$index].activityArray">
<div class="text col-md-11 firstWrap"> <img class="img-thumbnail" src="{{activityDesc.taskImage}}" alt=""> <span class="label label-info">{{activityDesc.taskName}}</span>
<p>{{ activityDesc.taskMessage }}</p>
<p class="chat_message_date">{{activityDesc.taskUser}} <span> {{activityDesc.taskDate}} , {{activityDesc.taskTime}}</span></p>
</div>
</div>
<div class="clearfix"></div>
</div> -->
<!-- <div class="col-md-6"></div> -->
<div class="clearfix"></div>
</div>
I think Your condition is wrong. You checked like this...
ng-class="$odd ? 'col-md-6' : '' "
Instead u can Change as
ng-class="{'pull-left':($index %2 ==0),'pull-right':($index %2 ==1)}"