I have used two plugins list.min.js and list.fuzzysearch.js.
When I use it in simple list, it works fine. But when I use it in ng-repeat, it throws error like "Cannot read property 'childNodes' of undefined at ...(list.min.js:1)..
search.html
<div id="testList" class="padding" >
<label class="item item-input">
<input type="text" placeholder="Search" class="fuzzy-search">
</label>
<div ng-repeat="content in contents">
<ul class="list" >
<li><p class="keyword">{{content.ChapterName}}</p></li>
</ul>
</div>
</div>
controller
.controller('SearchCtrl', ['$scope' ,'$http', function($scope, $http) {
$http.get("js/content.json").success(function(data) {
$scope.contents = data;
var demoList = new List('testList', {
valueNames: ['keyword'],
plugins: [ListFuzzySearch()]
});
});
})
Related
I've built a basic Angular app that successfully displays the results of an HTTP GET request.
I'd like to include fallback code that displays two static HTML elements in place of the remote content if the GET request fails.
I can just call a vanilla JS function to do DOM manipulation, but I'd like to do this the Angular way. I've read a lot of documentation and articles, but I'm not seeing a straightforward way to do this. Code below.
I'd like to replace the call to updateUIError() with Angular code that performs the same task.
Here's a Plunk: https://plnkr.co/edit/PDwSUCXGNW2cwAIwl9Z9?p=streamer
HTML:
<div class="scene fullheight" id="attractions" ng-app="listApp">
<article class="content">
<h1>Upcoming Events</h1>
<div class="main" ng-controller="ListController as eventsList">
<div class="search">
<label>search: </label>
<input ng-model="query" placeholder="Search for events" autofocus>
<label class="formgroup">by:
<select ng-model="eventOrder" ng-init="eventOrder='start.local'">
<option value="start.local">Date</option>
<option value="name.text">Name</option>
</select>
</label>
<label class="formgroup">
<input type="radio" ng-model="direction" name="direction" checked>
ascending
</label>
<label class="formgroup">
<input type="radio" ng-model="direction" name="direction" value="reverse">
descending
</label>
</div>
<ul class="eventlist">
<li class="event cf" ng-repeat="item in eventsList.events | filter: query | orderBy: eventOrder:direction">
<div class="info">
<h2>{{item.name.text}}</h2>
<p>{{item.start.local | date:"dd MMMM ', ' h:mma"}}</p>
</div>
</li>
</ul>
</div>
</article>
</div>
Angular:
angular.module('listApp', [])
.controller('ListController', ['$scope', '$http', function($scope,$http) {
var eventsList = $scope.eventsList;
$http.get(URI)
.success(function(data) {
console.log(data);
eventsList.events = data.events;
}).error(function() {
updateUIError();
});
}]);
function updateUIError() {
var events = document.querySelector('#attractions article');
events.innerHTML = '<h1>Local Attractions</h1><p>There's lots to do nearby.</p>';
}
You need to create a static error and show it when the error occurs using ngIf
<div class="scene fullheight" id="attractions" ng-app="listApp">
<div ng-controller="ListController">
<article class="content" ng-if="hasUIError">
<h1>Local Attractions</h1>
<p>There's lots to do nearby.</p>
</article>
<article class="content" ng-if="!hasUIError">
<h1>Upcoming Events</h1>
<!-- REST OF THE HTML -->
</article>
</div>
</div>
Then, in your controller, you need to set the flag to false by default:
$scope.hasUIError = false;
And when there's an error in the ajax, set it to true
$http.get(URI).then(
function(response) {
console.log(response);
$scope.events = response.data.events;
},
function() {
$scope.hasUIError = true;
}
);
Before solving your issue, there is another issue to address. Specifically, since you are using the ControllerAs approach, you'll want to attach your variables to 'this' rather than $scope.
Then you create a variable called showError that will get evaluated in showing the message. Then you can use the ng-show directive to hide/show the message.
angular.module('listApp', [])
.controller('ListController', ['$http',
function($http) {
var vm = this;
vm.events = [];
vm.showError = false;
$http.get(URI)
.success(function(data) {
vm.events = data.events;
}).error(function() {
vm.showError = true;
});
}
]);
<!DOCTYPE html>
<html ng-app="listApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
<script src="app.js"></script>
</head>
<body ng-controller="ListController as eventsList">
<div class="scene fullheight" id="attractions">
<div ng-show="eventsList.showError">
<h1>Local Attractions</h1>
<p>There's lots to do nearby.</p>
</div>
<article class="content">
<h1>Upcoming Events</h1>
<div class="main">
<div class="search">
<label>search:</label>
<input ng-model="query" placeholder="Search for events" autofocus>
<label class="formgroup">by:
<select ng-model="eventOrder" ng-init="eventOrder='start.local'">
<option value="start.local">Date</option>
<option value="name.text">Name</option>
</select>
</label>
<label class="formgroup">
<input type="radio" ng-model="direction" name="direction" checked>ascending
</label>
<label class="formgroup">
<input type="radio" ng-model="direction" name="direction" value="reverse">descending
</label>
</div>
<ul class="eventlist">
<li class="event cf" ng-repeat="item in eventsList.events | filter: query | orderBy: eventOrder:direction">
<div class="info">
<h2>{{item.name.text}}</h2>
<p>{{item.start.local | date:"dd MMMM ', ' h:mma"}}</p>
</div>
</li>
</ul>
</div>
</article>
</div>
</body>
</html>
Do something like this:
angular.module('listApp', [])
.controller('ListController', ['$scope', '$http', function($scope,$http) {
var eventsList = $scope.eventsList;
$http.get(URI)
.success(function(data) {
console.log(data);
eventsList.events = data.events;
}).error(function() {
eventsList.errorMessage = '<h1>Local Attractions</h1><p>There's lots to do nearby.</p>';
});
}]);
In the HTML, add a span inside the scope of ListController that will have ngModel="errorMessage". You can add additional property to show / hide the error span and main content div.
I'm trying to make a little app in ionic, but it gave me that error when i call the $scope.saveClass() function from the UI.
Unable to get property 'subject' of undefined or null reference
I don't understand because he doesn't work. Premise: i'm new to ionic/angularjs developing.
I thank you in advance for helping
code (www/js/controllers.js)
angular.module('starter.controllers')
.service("DB", function() {
this.classDB = new PouchDB("classesDB");
})
.controller("AddClassCtrl", function ($scope, DB) {
$scope.saveClass = function () {
var newclass = {
"_id": $scope.class.subject,
"subject": $scope.class.subject,
"room": $scope.class.room
}
DB.classDB.put(newclass);
window.location.href = '#app/schedule'
};
})
Code (add-class.html)
<ion-content controller="AddClassCrtl">
<div class="list">
<!--Select the subject-->
<label class="item item-input item-select">
<div class="input-label">
Subject
</div>
<button class="button button-block button-positive overflowShow"> Add a subjects </button>
<select class="item-input" ng-model="class.subject" ng-selected="class.subject">
<option ng-repeat="subject in subjects">{{subject}}</option>
</select>
</label>
<!--Insert the room number-->
<label class="item item-input item-stacked-label">
<input type="text" placeholder="Room" ng-model="class.room" ng-text-change="class.room">
</label>
<div class="item">
<button ng-click="discardClass()" class="button button-block">Discard</button>
<button ng-click="saveClass()" class="button button-block">Save</button>
</div>
</div>
</ion-content>
It's probably because you didn't initialize $scope.class variable and in fact, when you try to access $scope.class.subject, $scope.class is undefined. Add this code at the beginning of your controller:
$scope.class = {};
On my page I'm rendering the form based on api call. With help couple filters I'm hiding all elements which have 'id' in title and which equal 0, but I need to display initial element Id. I would used '$first' but the first element is checkbox value, so how can it be done? I appreciate for any help. applied plunk
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.upload = function (){
$scope.rowKeys = Object.keys($scope.rowData);
};
});
app.filter('hide', function () {
return function(input, arg) {
return input.replace(arg, '');
};
})
html
<form style="padding: 15px">
<button class="btn btn-default" ng-click="upload()">Upload</button>
<div class="form-group row">
<div ng-repeat="k in rowKeys | filter: '!id' | filter: '!0'" ng-model="rowValue">
<label for="rowValue" class="col-sm-2">{{k | hide:'.name'}}:</label>
<div class=" col-sm-2">
<input class="form-control rowValue" id="rowValue" value="{{rowData[k]}}" />
</div>
</div>
</div>
<button type="submit" class="btn btn-default" ng-if="rowData" ng-disabled="!rowValue">Submit</button>
</form>
You can make use of ng-if for this:
<div ng-repeat="thing in things">
<div ng-if="(thing === 'id' || thing.toLowerCase().endsWith('id') === false) ? true : false">
{{thing}}
</div>
</div>
I am building an angular ionic app using meteor framework so far so good, but I am trying to update my scope using $apply method which is not updating my scope, here is my code. To be more specific the user after uploading the image calls addAvatar function() which converts the image to a base64 object using fileReader API. Which in turn must be assigned to editProfileController.cropImgSrc using $apply but its not happening.
I am trying to update scope of editProfileController.cropImgSrc
Template(directive)
<ion-view view-title="Profile Edit">
<div class="bar bar-header bar-positive">
<h1 class="title">edit your profile</h1>
</div>
<ion-content overflow-scroll="true" class="has-header">
<h4 style="color:#212121;font-family: 'proxima',sans-serif;">Edit profile</h4>
<div class="row row-center">
<div class="col col-25">
<div>
{{editProfileController.cropImgSrc}}
</div>
</div>
<div class="col">
<div class="button button-outline button-positive" ngf-select
ngf-change="editProfileController.addAvatar($files)"
ngf-multiple="false" ngf-allow-dir="false" ngf-accept="'image/*'"
ngf-drop-available="false">
edit my display picture
</div>
</div>
</div>
<div class="list">
<div class="list">
<label class="item item-input">
<span class="input-label">your name</span>
<input type="text" ng-model="editProfileController.profile.name">
</label>
<label class="item item-input">
<span class="input-label">your birthday</span>
<input type="date" ng-model="editProfileController.profile.birthday">
</label>
<label class="item item-input item-select">
<div class="input-label">
Gender
</div>
<select ng-model="editProfileController.profile.gender">
<option selected>Female</option>
<option>Male</option>
<option>Others</option>
</select>
</label>
</div>
<h5 style="color:#212121;font-family: 'proxima',sans-serif;" class="padding">Add a short Bio about you, Keep it interesting and simple!</h5>
<label class="item item-input">
<span class="input-label">Bio</span>
<input type="text" placeholder="I am a storm trooper, fighting at star wars." ng-model="editProfileController.profile.bio">
</label>
<br>
<div class="row padding">
<div class="col">
<button class="button button-outline button-positive button-block">
save my profile
</button>
</div>
</div>
</div>
</ion-content>
Controller
angular.module('appName').directive('profileedit',function(){
return{
restrict: 'E',
templateUrl: 'client/modules/profile-edit/profile-edit.html',
controllerAs: 'editProfileController',
controller: function($scope,$reactive){
$reactive(this).attach($scope);
this.helpers({
cropImgSrc: function(){
return ' ';
}
});
this.addAvatar = function(files){
if (files.length > 0) {
var reader = new FileReader();
reader.onload = function(e) {
$scope.$apply(function(){
this.cropImgSrc = e.target.result;
});
};
reader.readAsDataURL(files[0]);
}
else {
this.cropImgSrc = undefined;
}
};
}
}
});
Solution
attach this to vm above the controller definetion,
var vm = this;
The error occurs because the context of this has changed within the $scope.$apply method call.
See: this context within an event handler
A simple fix would be to save the context of this in a variable at the top of the controller's definition:
controller: function($scope,$reactive){
// save context of this in a variable
var vm = this;
$reactive(this).attach($scope);
this.helpers({
cropImgSrc: function(){
return ' ';
}
});
this.addAvatar = function(files){
if (files.length > 0) {
var reader = new FileReader();
reader.onload = function(e) {
$scope.$apply(function(){
// vm still refers to the controller here
vm.cropImgSrc = e.target.result;
});
};
reader.readAsDataURL(files[0]);
}
else {
this.cropImgSrc = undefined;
}
};
}
I am new to angular and trying to implement add to list functionality. I have a few questions
why does console.log of $scope.newChat return undefined
Is newChat available to sendChat() call due to variable hoisting.
Template
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
<img ng-src="{{chat.face}}" >
<h2>{{chat.name}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove(chat)">
Delete
</ion-option-button>
</ion-item>
<ion-item >
<form ng-submit="sendChat(newchat)"> <!-- this line in question 2 -->
<label class="item item-input">
<input type="text" placeholder="What do you need to do?" ng-model="newchat.lastText">
<button type="submit" class="button button-right button-positive">Send</button>
</label>
</div>
</form>
</ion-item>
</ion-list>
controller
.controller('ChatsCtrl', function($scope, Chats) {
$scope.chats = Chats.all();
$scope.remove = function(chat) {
Chats.remove(chat);
}
$scope.sendChat = function(newchat){
Chats.set(newchat);
console.log($scope.newchat); //this line in question 1
newchat.lastText = "";
}
})
1) why does console.log of $scope.newChat return undefined
you are getting newchat on scope console.log($scope.newchat); try console logging with console.log(newchat); they both are same as newchat in ng-model make it available on scope. See console after clicking send button in demo below
2)Is newChat available to sendChat() call due to variable hoisting.
No it is available due to ng-model data binding
Demo
angular.module('myApp',[])
.controller('ChatsCtrl', function($scope) {
//$scope.chats = Chats.all();
$scope.remove = function(chat) {
//Chats.remove(chat);
}
$scope.sendChat = function(newchat){
// Chats.set(newchat);
console.log($scope.newchat); //this line in question 1
newchat.lastText = "";
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ChatsCtrl"> <form ng-submit="sendChat(newchat)"> <!-- this line in question 2 -->
<label class="item item-input">
<input type="text" placeholder="What do you need to do?" ng-model="newchat.lastText">
<button type="submit" class="button button-right button-positive">Send</button>
</label>
</form>
</div>
change your controller to following
.controller('ChatsCtrl', function($scope, Chats) {
$scope.newchat = {};
$scope.chats = Chats.all();
$scope.remove = function(chat) {
Chats.remove(chat);
}
$scope.sendChat = function(newchat){
Chats.set(newchat);
console.log($scope.newchat); //now you will have your $scope.newchat
newchat.lastText = "";
}
})