While going from step-to-step i have applied ng-if condition on step... how to continue if any of if condition fails in angular-intro.js??
<a ng-intro-options="IntroOptions" ng-intro-method="CallMe"
ng-intro-oncomplete="CompletedEvent" ng-intro-onexit="ExitEvent"
ng-intro-onchange="ChangeEvent" ng-intro-onbeforechange="BeforeChangeEvent"
ng-intro-autostart="false" ng-click="CallMe();">
<span class="pull-right">
<i class="fa fa-question fa-md" aria-hidden="true" title="Help"></i>
</span>
</a>
<div id="step1">welcome</div>
<div ng-if="admin" id="step2">hello nice to meet you Admin</div>
<div id="step3">list of tasks for the day {{user}}</div>
and in my controller:
$scope.IntroOptions = {
steps:[
{
element: '#step1',
intro: 'Search data from current list. Advanced Search helps you find data with respective columns.',
position: 'bottom'
},
{
element: '#step2',
intro: 'Click on Add icon to add new Channel.',
position: 'left'
},
{
element: '#step3',
intro: 'List of all channels.',
position: 'top'
}
],
showStepNumbers: false,
showBullets: false,
exitOnOverlayClick: true,
exitOnEsc:true,
nextLabel: '<strong>NEXT!</strong>',
prevLabel: '<span style="color:green">Previous</span>',
skipLabel: 'Exit',
doneLabel: 'Thanks'
};
Its working perfectly when ng-if condition is 'admin'.But when if condition fails its ending with step1 how can I continue with step3 directly if ng-if condition fails.
Related
Has anyone used Svelte in their projects? I just have a small question. Let's say you are looping through an array and displaying the data in the array. And there are 4 objects in the array. If I only want to style the first iteration (bluma). How do I do it?
let items = [
{ icon: 'book', title: 'bulma', tags: ['public', 'sources'] },
{ icon: 'book', title: 'marksheet', tags: ['private'] },
{ icon: 'book', title: 'minireset.css', tags: ['public', 'sources'] },
{ icon: 'code-branch', title: 'daniellowtw/infboard', tags: ['public', 'forks'] },
{ icon: 'code-branch', title: 'mojs', tags: ['private'] }
]
{#each filteredItems as item}
<a class="panel-block {item.}">
<span class="panel-icon">
{#if item.icon === "code-branch"}
<i class="fas fa-code-branch" aria-hidden="true"></i>
{:else if item.icon ==="book"}
<i class="fas fa-book" aria-hidden="true"></i>
{/if}
Whenever a pure CSS approach is available, I would rather use that. Here you could make use of the :first-child selector:
<div class="panel-items">
{#each filteredItems as item}
<a class="panel-block">
<span class="panel-icon">
{#if item.icon === "code-branch"}
<i class="fas fa-code-branch" aria-hidden="true"></i>
{:else if item.icon ==="book"}
<i class="fas fa-book" aria-hidden="true"></i>
{/if}
</span>
</a>
{/each}
</div>
<style>
.panel-block {
/* general panel block styling */
}
.panel-block:first-child {
/* first panel block style overrides */
}
</style>
Note that the entire loop is held within its own container div in order to make sure the first item in the loop is indeed the first child of its parent container.
This can be done by using the index provided as a second argument of the #each block:
{#each filteredItems as item, i}
<span style="color:{i === 0 ? 'green' : 'red'}">
{item.title}
</span>
{/each}
Reference: Each block in svelte tutorial.
sorry for a noob question, just started with Knockout.js. I have an array of objects and I want to update the view when object property favorite: changes but every time I click on an icon that triggers the change nothing happens. When I add a new object to an array UI gets rerendered. I would really appreciate some help with this. Thanks
<div id="container" data-bind="foreach:savedSearches">
<div class="save-search-item" data-bind="attr:{'data-name': $data.name, 'data-id':$data.id, 'favourite':$data.favorite() === 1}">
<div data-bind="text: $data.name"></div>
<div class="icons">
<a href="#" class="favourite-search">
<i class="fas fa-star" data-bind="css: {favourite: $data.favorite() === 1}"></i>
</a>
<a href="#" class="edit-search">
<i class="fas fa-edit"></i>
</a>
<a href="#" class="delete-search">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
var searches = [
{
activation_time: null,
activation_time_ms: null,
favourite: 1,
enabled: 1,
id: 66,
name: "adfdfafs"
},
{
activation_time: null,
activation_time_ms: null,
favourite: 0,
enabled: 1,
id: 66,
name: "adfdfafs"
}
];
ko.applyBindings(AppViewModel, $('#container'));
function AppViewModel(data) {
self.savedSearches = ko.observableArray([]);
self.favourite = ko.observable();
self.populateSavedSearches = function(data) {
data.forEach(function(search) {
search.favorite = ko.observable();
});
self.savedSearches(data);
}
}
$('.favourite-search').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
// get parent element with id
var parent = e.currentTarget.closest('.save-search-item');
var searchId;
var isFavourite = false;
if (parent) {
searchId = parseInt(parent.getAttribute('data-id'));
isFavourite = parent.getAttribute('favourite');
searches.map(function(search) {
if (search.id === searchId) {
search.favorite = 0;
ko.populateSavedSearches(search);
}
});
}
});
When using knockout, you should not add your own event listeners via jQuery.
In this case, use the click binding to react to user behavior.
I did the bare minimum to make your snippet work, but I think it gets the point across:
You already found out you have to make the favorite property observable! Great start
I added a toggle function to each of the searches that swaps the favorite observable between 1 and 0
In the view, I added a click binding that calls toggle
In the view, I moved your favourite attribute binding to be a css binding. This makes sure favorited searches get the favourite class
In CSS, I styled .favourite elements to have a yellow background.
In applyBindings, I use new to create a new viewmodel and pass the app container using [0]
You can see these changes in action in the snippet below.
var searches = [
{
activation_time: null,
activation_time_ms: null,
favourite: 1,
enabled: 1,
id: 66,
name: "adfdfafs"
},
{
activation_time: null,
activation_time_ms: null,
favourite: 0,
enabled: 1,
id: 66,
name: "adfdfafs"
}
];
ko.applyBindings(new AppViewModel(searches), $('#container')[0]);
function AppViewModel(data) {
const self = this;
self.savedSearches = ko.observableArray([]);
self.favourite = ko.observable();
self.populateSavedSearches = function() {
data.forEach(function(search) {
search.favorite = ko.observable(search.favorite);
search.toggle = function() {
search.favorite(search.favorite() ? 0 : 1);
}
});
self.savedSearches(data);
}
self.populateSavedSearches();
}
.favourite { background: yellow }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div id="container" data-bind="foreach: savedSearches">
<div class="save-search-item" data-bind="
click: toggle,
attr: {
'data-name': $data.name,
'data-id':$data.id
},
css: { 'favourite': $data.favorite() === 1 }
">
<div data-bind="text: $data.name"></div>
<div class="icons">
<a href="#" class="favourite-search">
<i class="fas fa-star" data-bind="css: {favourite: $data.favorite() === 1}"></i>
</a>
<a href="#" class="edit-search">
<i class="fas fa-edit"></i>
</a>
<a href="#" class="delete-search">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
I'm using angular bootstrap calendar by https://github.com/mattlewis92/angular-bootstrap-calendar#installation
I am not able to see the calendar template it looks like this
angular controller is
module app.calendar.controllers {
import angularCalendar = angular.bootstrap.calendar;
export class calendarSample1Controller //implements angular.bootstrap.calendar.events.IOnEditEventClick
{
calendarTitle: string;
calendarView: string = "month";
viewDate: Date = new Date();
events: Array<angularCalendar.IEvent>;
isCellOpen: boolean = true;
customTemplateUrls: string[];
constructor(private calendarConfig: angularCalendar.ICalendarConfig, private $templateCache: ng.ITemplateCacheService, private $http: ng.IHttpService) {
$templateCache.get('calendar.html');
this.getEvents();
}
private getEvents() {
//TODO get all the events from service
this.events = [
{
title: 'An event',
color: this.calendarConfig.colorTypes.hearings,
startsAt: moment().startOf('week').subtract(2, 'days').add(8, 'hours').toDate(),
endsAt: moment().startOf('week').add(1, 'week').add(9, 'hours').toDate(),
draggable: false,
resizable: false,
}, {
title: '<i class="glyphicon glyphicon-asterisk"></i> <span class="text-primary">Another event</span>, with a <i>html</i> title',
color: this.calendarConfig.colorTypes.holidays,
startsAt: moment().subtract(1, 'day').toDate(),
endsAt: moment().add(5, 'days').toDate(),
draggable: false,
resizable: false,
}, {
title: 'This is a really long event title that occurs on every year',
color: this.calendarConfig.colorTypes.inspections,
startsAt: moment().startOf('day').add(7, 'hours').toDate(),
endsAt: moment().startOf('day').add(19, 'hours').toDate(),
recursOn: 'year',
draggable: false,
resizable: false,
}
];
}
eventClicked(calendarEvent: angularCalendar.IEvent): void {
console.log("clicked");
};
}
}
and the view I am using is this
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h1>Calendar sample 1</h1>
<div ng-controller="calendarController as vm">
<h2 class="text-center">{{ vm.calendarTitle }}</h2>
<div class="row">
<div class="col-md-6 text-center">
<div class="btn-group">
<button class="btn btn-primary"
mwl-date-modifier
date="vm.viewDate"
decrement="vm.calendarView">
Previous
</button>
<button class="btn btn-default"
mwl-date-modifier
date="vm.viewDate"
set-to-today>
Today
</button>
<button class="btn btn-primary"
mwl-date-modifier
date="vm.viewDate"
increment="vm.calendarView">
Next
</button>
</div>
</div>
<br class="visible-xs visible-sm">
<div class="col-md-6 text-center">
<div class="btn-group">
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'year'">Year</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'month'">Month</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'week'">Week</label>
<label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'day'">Day</label>
</div>
</div>
</div>
<br>
<mwl-calendar events="vm.events"
view="vm.calendarView"
view-title="vm.calendarTitle"
view-date="vm.viewDate"
on-event-click="vm.eventClicked(calendarEvent)"
on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
cell-is-open="vm.isCellOpen"
day-view-start="06:00"
day-view-end="22:59"
day-view-split="30"
cell-modifier="vm.modifyCell(calendarCell)">
</mwl-calendar>
</div>
The controller is bound like this
module app.calendar {
"use strict";
import calendarSample1Controller = app.calendar.controllers.calendarSample1Controller ;
import angularCalendar = angular.bootstrap.calendar;
angular.module("app.calendar", ['mwl.calendar', 'ui.bootstrap','ngAnimate',])
.controller("calendarController", ["calendarConfig", "$templateCache", '$http', calendarSample1Controller])
.config(function () {
});
}
There are no errors on the page but the template isn't loading,
I'm not sure where to place the templates, the project convention is not to use html files but to return razor views so I even attempted to give urls in the calendarConfig.templates but the code to get the template content gets called before the templates are actually loaded.
I'm not sure if I'm doing something wrong with this plugin, but if someone can explain how the templates are loaded that would be great.
Thanks!
The templates were simply not loaded, the js requires you to load the templates into templatecache, I used
template content to have them into the template cache in order to show them
I am using the official semantic ui package for my Meteor web app and getting this error whenever I try and navigate through the vertical menu. This is causing my flowrouter routes to act wonky and not display. Thus, killing my mobile experience :(. But everything works perfect on desktop.
Error: Failed to execute 'insertBefore' on 'Node':
The node before which the new node is to be inserted is not a child of this node.
The template:
<template name="_nav">
<div>
<div class="ui grid large menu computer only">
<div class="item">
<img src="/cook.png" href="/">
</div>
<a href="/" class="item {{isActiveRoute name='home'}}">
Home
</a>
<a href="/aboutus" class="item {{isActiveRoute name='aboutus'}}">
About Us
</a>
<a href="/team" class="item {{isActiveRoute name='team'}}">
Team
</a>
<a href="/contacts" class="item {{isActiveRoute name='contacts'}}">
Contacts
</a>
<div class="ui large right menu">
{{#if isInRole 'admin'}}
<a href="/admin" class="item {{isActiveRoute name='admin'}}">
Admin
</a>
{{/if}}
<a class="ui item">
{{> loginButtons}}
</a>
</div>
</div>
<div class="ui grid secondary menu mobile tablet only">
<div class="ui container">
<a class="item toggle-menu">
<i class="big sidebar icon"></i>
</a>
<div class="ui sidebar vertical menu">
<a href="/" class="item {{isActiveRoute name='home'}}">
Home
</a>
<a href="/aboutus" class="item {{isActiveRoute name='aboutus'}}">
About Us
</a>
<a href="/team" class="item {{isActiveRoute name='team'}}">
Team
</a>
<a href="/contacts" class="item {{isActiveRoute name='contacts'}}">
Contacts
</a>
{{#if isInRole 'admin'}}
<a href="/admin" class="item {{isActiveRoute name='admin'}}">
Admin
</a>
{{/if}}
</div>
<div class="ui secondary right menu">
<a class="ui item">
{{> loginButtons}}
</a>
</div>
</div>
</div>
</div>
</template>
Events:
Template._nav.events({
'click .toggle-menu': function () {
$('.ui.sidebar')
.sidebar('toggle');
}
});
Routes (FlowRouter):
FlowRouter.route( '/' , {
action: function() {
BlazeLayout.render( '_app', {
nav: '_nav',
content: 'home',
footer: '_footer'
});
},
name: 'home'
});
FlowRouter.route( '/AboutUs' , {
action: function() {
BlazeLayout.render( '_app', {
nav: '_nav',
content: 'aboutus',
footer: '_footer'
});
},
name: 'aboutus'
});
FlowRouter.route( '/Team' , {
action: function() {
BlazeLayout.render( '_app', {
nav: '_nav',
content: 'team',
footer: '_footer'
});
},
name: 'team'
});
FlowRouter.route( '/Contacts' , {
action: function() {
BlazeLayout.render( '_app', {
nav: '_nav',
content: 'contacts_list',
footer: '_footer'
});
},
name: 'contacts'
});
FlowRouter.route( '/Admin' , {
action: function() {
BlazeLayout.render( '_app', {
nav: '_nav',
content: 'admin',
footer: '_footer'
});
},
name: 'admin'
});
CSS (if it matters):
.ui.menu .active.item {
background-color: #E0F1FF !important;
color: Black !important;
}
.ui.dropdown.item {
padding: 0;
}
.ui.dropdown.item:hover {
background-color: rgba(0, 0, 0, 0.00) !important;
}
.ui.menu {
margin: 0;
}
Again, this error only shows whenever I try and navigate with the vertical menu. I am also using the sach:db-admin package which is yogibens:admin package but for FlowRouter. Which uses twbs:bootstrap for styling. This might be causing some issues but I am unsure.
Try putting a container ( or etc) around {{#each}} or {{#if}} fields. Theres a bug with issues reported on meteor's github page. Something along the lines of replacing blocks.
https://github.com/meteor/meteor/issues/2373
I can't load owl carousel in a angularjs dynamic content.
I use this (edited) html:
<div id="Galeria" owlcarousel class="youplay-carousel gallery-popup">
<a class="angled-img" href="http://www.youtube.com/watch?v={{video}}" ng-repeat="video in juego.Galerias.Videos">
<div class="img">
<img src="http://img.youtube.com/vi/{{video}}/maxresdefault.jpg" alt="">
</div>
<i class="fa fa-play icon"></i>
</a>
<a class="angled-img" href="/img/galerias/{{imagen}}" ng-repeat="imagen in juego.Galerias.Imagenes">
<div class="img">
<img src="/img/galerias/{{imagen}}" alt="">
</div>
<i class="fa fa-search-plus icon"></i>
</a>
</div>
and this (edited) directive to my app:
app.directive('owlcarousel', function() {
var linker = function(scope, element, attr) {
var loadCarousel = function() {
console.log(element);
element.owlCarousel({
loop: !0,
stagePadding: 70,
nav: !0,
autoplay: 0 ? !0 : !1,
autoplayTimeout: 0,
autoplaySpeed: 600,
autoplayHoverPause: !0,
navText: ["", ""],
responsive: {
0: {
items: 1
},
500: {
items: 2
},
992: {
items: 3
},
1200: {
items: 4
}
}
});
}
scope.$watch("juego.Galerias.Videos", function(value) {
loadCarousel(element);
});
scope.$watch("juego.Galerias.Imagenes", function(value) {
loadCarousel(element);
})
}
return {
restrict: "A",
link: linker
}
});
But i can't load the carousel every time i load new content. I try to bind jquery event, call function in controller...etc.
PD: I use ng-routes and load html dinamically.
You can pass models to directive scope, and then do scope.$watch and reinit owlCarousel with reinit method. It is just an idea, if you could specify plunkr or fiddle it would be easier to help.