Angular hide an element in ng-repeat on click - javascript

I have articles listed on a page in my app, where I have an iframe and overlay over that iframe. I want to have it that when a user clicks on an iframe overlay, that the title from that article gets hidden. Not sure how to achieve that in ng-repeat. This the code, where as of now, on a click event titles of all articles get hidden.
<ion-item ng-repeat="article in articles" class="item-light">
<div class="article">
<a ng-show="article.external_media.length == 0 || article.external_media.url == ''" href="#/main/article/{{article.id}}" nav-direction="forward" class="article-image-link">
<img src="{{ fileServer }}/imagecache/cover/{{article.cover_image}}">
<h1>{{ article.title.split(' ', 7).join(' ') }}</h1>
</a>
<div class="iframe" ng-show="article.external_media.length > 0 && article.external_media.url != ''">
<iframe ng-src="{{article.external_media[0].url | safeUrl }} "></iframe>
<div class="article-image-link">
<h1 ng-hide="videoPlaying">{{ article.title.split(' ', 7).join(' ') }}</h1>
</div>
<div class="iframe-overlay" ng-click="playVideo()"></div>
</div>
</div>
</ion-item>
Controller:
$scope.playVideo = function(videoSrc) {
$scope.videoPlaying = true;
$scope.videoSrc = videoSrc + "&autoplay=1";
};

you can also use $index for this purpose.
controller
app.controller('someController',function($scope){
$scope.videoPlaying = [];
$scope.playVideo = function(videoSrc,index) {
$scope.videoPlaying[index] = true;
$scope.videoSrc = videoSrc + "&autoplay=1";
};
$scope.stopVideo = function(videoSrc,index) {
$scope.videoPlaying[index] = false;
$scope.videoSrc = videoSrc + "&autoplay=1";
};
})
HTML
i am changing only two lines rest are same as it is
<h1 ng-hide="videoPlaying[$index]">{{ article.title.split(' ', 7).join(' ') }}</h1>
<div class="iframe-overlay" ng-click="playVideo($index)"></div>

I've created a JSFIDDLE (basic) to give you a head start on what you are trying to do.
VIEW
<div ng-app="app">
<div ng-controller="helloCnt">
<div ng-repeat='item in data'>
<span ng-if="item.hide === undefined || !item.hide">{{item.name}}</span>
<div ng-if="!item.hide" ng-click="playVideo(item)">
HIDE
</div>
<div ng-if="item.hide" ng-click="stopVideo(item)">
SHOW
</div>
<br/>
</div>
</div>
</div>
CONTROLLER
var app = angular.module('app', [])
app.controller('helloCnt', function($scope) {
$scope.data = [{
'name': 'test'
}, {
'name': 'in'
}, {
'name': 'dummy'
}, {
'name': 'data'
}]
$scope.playVideo = function(item, videoSrc) {
// other code
item.hide = true;
};
$scope.stopVideo = function(item, videoSrc) {
// other code
item.hide = false;
};
})
SEE JSFIDDLE

Related

Remove specific data from firebase using Angularjs

I'm trying to remove specific data from firebase using angularjs. But my coding removes all data from it. Any Help would be Appreciated.
For Example i need to delete the second data as highlighted using the remove button in it.
My HTML:
<div class="container" ng-controller="budgetCtrl">
<div class="row list" ng-repeat="kasu in panam">
<div class="col-6"> {{ kasu.title }} </div>
<div class="col-6 text-right total">
{{ kasu.spent | currency:"₹" }}
<button type="button" ng-click="deleteSpent(panam)">Remove</button>
</div>
</div>
<div class="row" style="background: #1feb6b">
<div class="col-6"> Total Money spend </div>
<div class="col-6 text-right"> {{ getTotal() | currency:"₹" }} </div>
</div>
</div>
My JS:
var nombre = angular.module('nombre', ['ngRoute', 'firebase']);
nombre.controller('budgetCtrl', ['$scope', 'money', '$firebaseObject', function($scope, money, $firebaseObject){
money.then(function(data){
$scope.cash = data;
});
var ref = firebase.database().ref();
$scope.panam = $firebaseObject(ref);
$("#nombre").submit(function() {
if( (!$("#Spentfor").val()) || (!$("#SpentAmount").val()) ) {
$(".form-control").css({"border":"3px solid red"});
}
else {
$(this), console.log("Submit to Firebase");
var Spentfor = $("#Spentfor").val(),
SpentAmount = $("#SpentAmount").val(),
total = { title: Spentfor, spent: SpentAmount};
return ref.push().set(total).then(function() {
$("#Spentfor, #SpentAmount").val("");
});
}
});
$scope.getTotal = function(){
var total = 0;
$scope.panam.forEach(p => {
total += parseFloat(p.spent);
});
return total;
}
$scope.deleteSpent = function(info){
$scope.panam
.$remove(info)
.then( function(ref){}, function(error){})
}
}]);
On Above JS i'm trying to delete specific data in firebase using deleteSpent() function. I know that i'm missing to targeting the specific data in my JS. If somebody helps me to solve and understand its concept would be appreciated.

How to show ionic popup using ng-click inside ng-repeat

here's my html code.
<div class='list' ng-repeat='worker in categories' >
<br><a class="item item-thumbnail-left" ng-click="showConfirm(worker.$id)">
<img src="img/tech_support.png">
<p>{{worker.$id}}</p>
<p>Address: {{worker.Address}}</p>
<p><u>more..</u></p>
</a>
</div>
and here's my controller.js
man.controller('categoryCtrl',function($scope,$firebaseArray,
$firebaseObject,$state,$stateParams,$ionicPopup,$window,$timeout){
var category = $stateParams.categoryId;
var categoryRef = Refroot.child('Workers').child(category);
$scope.categories=$firebaseArray(categoryRef);
$scope.showConfirm= function(id){
var workerId = id;
var workRef = Refroot.child('Workers');
var lastRef = workRef.child(category).child(workerId);
$scope.workerlist = $firebaseArray(lastRef);
var confirmPopup = $ionicPopup.confirm({
title: 'Worker Profile',
});
confirmPopup.then(function(res) {
if(res) {
console.log('Sure!');
} else {
console.log('Not sure!');
}
});
console.log(workerId + '' + category + '' + lastRef);
}
});
Hope you guys could help me, it will be a great help for my thesis :)
You should be using $index as below
<div class='list' ng-repeat='worker in categories track by $index' >
<br><a class="item item-thumbnail-left" ng-click="showConfirm($index)">
<img src="img/tech_support.png">
<p>{{$index}}</p>
<p>Address: {{worker.Address}}</p>
<p><u>more..</u></p>
</a>
</div>

Angular $injector:modulerr Module Error

I don't know what cause this error: Click to see the error
I'm trying to create a dynamic web application. Do I need a local-server to run this application. Currently i'm not using any local-server.
HTML:
<div class = "body" ng-controller = "app">
<div class = "column2">
<div class = "sectionName">
<span class = "sectionName-Span">{{ page.title() }}</span>
<div class = "container">
<ng-view>Something went wrong</ng-view>
</div>
</div>
</div>
<script type=text/ng-template id=profile.html>
I'm Lalinda Sampath Dias
</script>
Controller.js:
var application = angular.module('mainApp', ['appServices'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/tab1', {templateUrl: 'profile.html', controller: HomeCtrl}).
when('/tab2', {templateUrl: 'list.html', controller: ListCtrl}).
otherwise({redirectTo: '/tab1'});
}]);
/* Controllers */
function MainCtrl($scope, Page) {
console.log(Page);
$scope.page= Page;
}
function HomeCtrl($scope, Page) {
Page.setTitle("Welcome");
}
function ListCtrl($scope, Page, Model) {
Page.setTitle("Items");
$scope.items = Model.notes();
}
function DetailCtrl($scope, Page, Model, $routeParams, $location) {
Page.setTitle("Detail");
var id = $scope.itemId = $routeParams.itemId;
$scope.item = Model.get(id);
}
function SettingsCtrl($scope, Page) {
Page.setTitle("Settings");
}
/* Services */
angular.module('appServices', [])
.factory('Page', function($rootScope){
var pageTitle = "Untitled";
return {
title:function(){
return pageTitle;
},
setTitle:function(newTitle){
pageTitle = newTitle;
}
}
})
.factory ('Model', function () {
var data = [
{id:0, title:'Doh', detail:"A dear. A female dear."},
{id:1, title:'Re', detail:"A drop of golden sun."},
{id:2, title:'Me', detail:"A name I call myself."},
{id:3, title:'Fa', detail:"A long, long way to run."},
{id:4, title:'So', detail:"A needle pulling thread."},
{id:5, title:'La', detail:"A note to follow So."},
{id:6, title:'Tee', detail:"A drink with jam and bread."}
];
return {
notes:function () {
return data;
},
get:function(id){
return data[id];
},
add:function (note) {
var currentIndex = data.length;
data.push({
id:currentIndex, title:note.title, detail:note.detail
});
},
delete:function (id) {
var oldNotes = data;
data = [];
angular.forEach(oldNotes, function (note) {
if (note.id !== id) data.push(note);
});
}
}
});
Edit:
<body ng-app = "mainApp">
<div id = "background-div">
<div class = "header">
<div class = "ham-icon">
<img src = "images/ham-icon.png">
</div>
<div class = "logo">
<span class = "google-logo">Lalinda</span><span class = "hangouts-logo"> Sampath</span>
</div>
<div class = "profile-data">
</div>
</div>
<div class = "body" ng-controller = "app">
<div class = "column1">
<div class = "tab1">
<img src = "images/people-icon.png">
</div>
<div class = "tab2">
<img src = "images/chat-icon.png">
</div>
<div class = "tab3">
<img src = "images/phone-icon.png">
</div>
<div class = "tab4">
<img src = "images/other-icon.png">
</div>
</div>
<div class = "column2">
<div class = "sectionName">
<span class = "sectionName-Span">{{ page.title() }}</span>
<div class = "container">
<ng-view>Something went wrong</ng-view>
<!--input type = "text" ng-model = "name"-->
</div>
</div>
</div>
<script type=text/ng-template id=profile.html>
I'm Lalinda Sampath Dias
</script>
<div class = "column3">
<div classs = "user-greet">
<span class = "user-greet-span">Hi, Guest</span>
</div>
<div class = "det">
<span class = "det-span">Get started by calling or messaging a friend below</span>
</div>
<div class = "functional-area">
<div class = "video-call">
</div>
<div class = "phone-call">
</div>
<div class = "message">
</div>
</div>
</div>
</div>
</div>
</body>
You need to add ngRoute as depencies like this
var application = angular.module('mainApp', ['ngRoute','appServices'])
Figured out an answer by my-self. When adding ngRoute as a dependency we have to load ngRoute.js file. You can download it from the internet.
Here is the Google CDN:
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js

Ionic Modal: clear all fields on click/cancel

Ive tried to use this with the current view scope and also by adding its own controller. No success in clearing all fields on cancel button click. All I need is to clear the fields.
Here is my in my controller modal :
var myApp = angular.module('starter.controllers');
function TalkSearchPageCtrl($scope, TalkSearch, $ionicModal) {
var nextPageNum = 1;
$scope.noMoreItemsAvailable = false;
var nextPageNum = 1;
$scope.loadMore = function() {
TalkSearch.getList(nextPageNum, {
}, $scope.idsToExclude, $scope.backResult).success(function(items) {
if (typeof(items.idsToExclude) !== undefined) {
$scope.idsToExclude = items.idsToExclude;
$scope.backResult = true;
} else {
$scope.idsToExclude = undefined;
$scope.backResult = undefined;
}
// error check when it's not loading
if (items.talks.length != 0) {
i = 0;
while (i != items.talks.length - 1) {
$scope.talks.push(items.talks[i]);
i++;
}
nextPageNum++;
} else {
$scope.noMoreItemsAvailable = true;
}
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
$scope.talks = [];
$scope.categories = [
];
$scope.checkedCategories = [];
$scope.toggleCheck = function(category) {
if ($scope.checkedCategories.indexOf(category) === -1) {
$scope.checkedCategories.push(category);
} else {
$scope.checkedCategories.splice($scope.checkedCategories.indexOf(category), 1);
}
};
$scope.getValues = function(filter) {
console.log(filter);
if (filter.length || filter !== undefined) {
$scope.userFilter = {};
$scope.userFilter.categories = [];
$scope.userFilter.filters = {};
$scope.userFilter.filters = angular.copy(filter);
var categories = $scope.checkedCategories;
$scope.userFilter.categories = categories;
getFiltersService.filter = angular.copy(filter);
console.log($scope.userFilter);
// console.log(getFiltersService.filter);
}
};
$scope.reset = function() {
console.log($scope.userFilter);
// $scope.modal.hide();
// $scope.userFilter.filters = null;
// $scope.userFilter.categories = null;
// $scope.userFilter = {};
console.log($scope.userFilter);
};
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
}
myApp.controller('TalkSearchPageCtrl', ['$scope', 'TalkSearch', '$ionicModal', TalkSearchPageCtrl]);
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
Here is my html script template :
<script id="my-modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar bar-header schoolinkscolor headerSection" ng-controller="TalkFilterPageCtrl">
<div class="row padding0">
<div class="col">
<div class="button button-white closeModal" side="right" ng-click="reset(talkfilter);hideButton=false;showDetails=false;"><span>Cancel</span></div>
</div>
<div class="col">
<div class="light headerTitle"><span class="light">Schoo</span><span class="color-black">Links</span></div>
</div>
<div class="col">
<div class="button button-white searchButton" side="left"><span>Search</span></div>
</div>
</div>
</ion-header-bar>
<ion-content class="has-header">
<div class="talkFilterContainer">
<section>
<div class="col padding0">
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="talkfilter.searchTalk" ng-change="getValues(talkfilter)" ng-model-options="{ debounce: 1000 }">
</label>
</div>
</div>
</section>
<div class="row padding clearboth"></div>
<section>
<div class="list padding">
<label class="item item-input item-select">
<div class="input-label">
Language:
</div>
<select ng-options="author for author in ['Mandarin','Spanish','Portuguese']" ng-model="talkfilter.selectLanguage" ng-init="author = 'Select Preferred Language'" ng-change="getValues(talkfilter)">
<option value="">Select Preferred Language</option>
</select>
</label>
</div>
</section>
<div class="row padding clearboth"></div>
<section>
<div class="list padding">
<label class="item item-input item-select">
<div class="input-label">
Author Type:
</div>
<select ng-options="author for author in ['Consultant','School','Student']" ng-model="talkfilter.authorType" ng-init="author = 'Select By Author Type'" ng-change="getValues(talkfilter)">
<option value="">Select By Author Type</option>
</select>
</label>
</div>
</section>
<div class="row padding clearboth"></div>
<section class="padding">
<ion-list>
<ion-item ng-repeat="category in categories track by $index" ng-class="{ 'hidden': ! showDetails && $index > 2}">
<ion-checkbox value="{{category}}" ng-model="$index" ng-click="toggleCheck(category); getValues(talkfilter)">{{category}}</ion-checkbox>
</ion-item>
</ion-list>
<div class="row">
<button class="button button-full button-clear" ng-click="showDetails = ! showDetails;hideButton=true" ng-show="!hideButton">See All Categories</button>
</div>
</section>
</div>
</ion-content>
</ion-modal-view>
Here is my reset function:
var Talk = this;
Talk.reset = function(filter) {
console.log(filter);
filter = null;
};
Also tried with $scope :
$scope.reset = function(filter) {
console.log(filter);
filter = null;
};
***Update:
$scope.reset = function(filter) {
$scope.userFilter = null; //does not work. none of these variations work.
$scope.userFilter = '';
};
Both of these methods return undefined. But if i put the button in the body it clears the fields. I need the button in the header.
Also tried inlining the reset with:
<button ng-click="talkfilter=null"></button>
The problem is that you are not passing anything in the filter function with the ng-click, because your $scope.userfilter is not defined throughout the controller.
Adding $scope.userFilter = {} like you have done inside of getValues, outside of that function should give you the desired result if you do your reset function like so....
function TalkSearchPageCtrl($scope, TalkSearch, $ionicModal) {
$scope.userFilter = {};
...
$scope.reset = function(filter) {
console.log(filter); \\Make sure this is the object
$scope.userFilter = null; \\Set it to null or {}
}`

Make modification and decide where to put an element before his creation - using angularjs with directives

I'm trying to detect the creation of an element (an new added element) and do an action on this element (modification) and decide where to put it.
The element is added by an anguler biding items and I use a new directive:
My page HTML:
<body ng-controller="MainCtrl">
<main style="overflow: hidden;">
<input type="text" ng-model="url" ng-keyup="$event.keyCode == 13 ? addItem(url) : null" class="form-control" id="myinputurl" autofocus="autofocus" autocomplete="on" placeholder="Type URL">
<section class="cd-section index cd-selected">
<p>My section</p>
<content-item ng-repeat="item in items" itemActive="{{item.active}}" type="section"></content-item>
</section>
<!-- section -->
</main>
<nav class="cd-nav-container" id="cd-nav">
<p>My list</p>
<ul class="cd-nav">
<content-item ng-repeat="item in items" itemActive="{{item.active}}" type="list"></content-item>
</ul>
<!-- nav -->
</nav>
</body>
Add the item in a items scope:
$scope.addItem = function(myurl) {
var lastChildId = $("ul li").length;
var vall = lastChildId + 1;
var idItem = "item" + vall;
angular.forEach($scope.items, function(p) {
p.active = false; //set them all to false
});
//var trustedUrl = trustSrc(myurl);
$scope.items.push({
id: idItem,
item: '<a id="' + idItem + '" href="' + myurl + '"> Test for StackOverFlow </a>',
active: true
});
}
My directive:
app.directive('contentItem', function() {
return {
restrict: "EA",
scope: false,
template: function(elem, attr) {
var template = 'ErrorFail';
var type = attr.type;
if (type === "section") {
if (attr.itemActive) {
template = '{{item.itemm}}';
}
} else {
template = '<li id="{{item.id}}" color="red">{{item.itemm}}</li>';
}
return template;
}
}
});
Can someone help me please ?? This is Plunker Link

Categories