We Keep Coding

How to search for a user from a userslist using filter with ID value in AngularJS

I am working with a chat application. I need to put an input search box for the user to search for a friend from his friends list. I have written code to get ID values and and trigger it onkeyup. However, I am getting an uncaught reference error of function(name) is undefined. Here I am getting users list from server side using socket code.
Function in JS file
$scope.searchFn = function () {
var input, filter, ul, li;
input = document.getElementById("input");
// filter = input.value.toUpperCase();
ul = document.getElementById("list");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display =
"none";
}
}
}
HTML
<main>
<div class="container-fluid">
<input type="hidden" id="user" value="<%= user.username %>" />
<div class="row">
<div class="col-sm-4">
<div class="panel panel-success">
<div class="panel-heading">
<form action="/action_page.php" method="get">
<div class="input-group form-group">
<input id="input" class="form-control" name="browser" placeholder="Search friend.." ng-model="search" onkeypress="searchFn()">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<h4 align="center">Friends</h4>
</div>
<div class="panel-body" id="scrl1">
<ul id="list"></ul>
</div>
<div class="panel-footer">
<p id="typing"></p>
</div>
</div>
</div>
<div class=".space"></div>
<div class="col-sm-8">
<div class="panel panel-success">
<div class="panel-heading">
<h4 id="frndName" align="center">Chat Room</h4>
<a ng-click="clearchat()">
<span class="glyphicon glyphicon-trash" style="float:right;margin-top:-4%"></span>
</a>
</div>
<div class="panel-body" id="scrl2">
<p id="loading" align="center">Loading.....</p>
<p id="noChat" align="center">No More Chats To Display.....</p>
<p id="initMsg">!!...Click On User Or Group Button To Start Chat...!!</p>
<ul id="messages"></ul>
</div>
<div class="panel-footer input-group" style="width:100%">
<form id="chatForm" action="" onsubmit="return false">
<input id="myMsg" class="input-box-send form-control" ng-model="message" autocomplete="off" style="width:80%" placeholder="Write Message Here.." />
<button type="submit" id="sendBtn" class=" btn btn-primary " ng-disabled="!message" name="btn"><span class="glyphicon glyphicon-send"></span></button>
</form>
</div>
</div>
</div>
</div>
</div>
</main>

Don't use function expression $scope.searchFn = function () {}.
Function expressions in JavaScript are not hoisted.
Use named functions to avoid such cases
function searchFn() {...}

You are not using an angular directive for triggering the keypress event. The "onkeypress" is an html attribute so any function declared on $scope will not be accessible. You should use ng-keypress directive.
Before:
<input id="input" class="form-control" name="browser" placeholder="Search friend.." ng-model="search" onkeypress="searchFn()">
After:
<input id="input" class="form-control" name="browser" placeholder="Search friend.." ng-model="search" ng-keypress="searchFn()">

Posts in Edit View Not Populating... Angular

I am trying to populate an edit view in angular 1.x. My controllers are logging the value of "themenu" and "$scope.addmenu" but the data is not showing up in the text fields..
angular.module('sample.menu', [
'auth0'
]).controller('MenuCtrl', function HomeController($scope, $http, auth, $location, store) {
$scope.menus = {};
$scope.addmenu = {};
var res1 = $http.get('http://grubr2.webfacelab.com:8888/index.php/api/menu');
res1.success(function (data, status, headers, config) {
console.log(data);
$scope.menus = data;
});
res1.error(function (data, status, headers, config) {
alert("failure message: " + JSON.stringify({ data: data }));
});
$scope.addMenu = function () {
console.log('Adding Menu');
console.log($scope.menu);
var res = $http.post('http://grubr2.webfacelab.com:8888/index.php/api/menu', $scope.menu);
res.success(function (data, status, headers, config) {
$scope.message = data;
});
res.error(function (data, status, headers, config) {
alert("failure message: " + JSON.stringify({ data: data }));
});
}
$scope.editThisMenu = function (themenu) {
console.log("Edit this menu:");
console.log(themenu);
console.log("End menu data");
$scope.addmenu = themenu;
console.log($scope.addmenu);
}
$scope.updateMenu=function(){
alert('Update menu!!');
}
});
And in my views Menus.html
<ion-view title="Menus">
<ion-content padding="'true'" class="has-header">
<form class="list">
<div class="list card">
<div class="item item-divider">Menu Item</div>
<div class="item item-body">
<ion-list>
<ion-item menu-close="" class="item-thumbnail-left">
<img>
<h2>Menu Item</h2>
<p>**Delicious</p>
</ion-item>
</ion-list>
<button class="button button-stable button-block ">Upload Picture</button>
</div>
</div>
<ion-list>
<label class="item item-input">
<span class="input-label">Name</span>
<input ng-model="menu.name" type="text" placeholder="">
</label>
<label class="item item-input">
<span class="input-label">Description</span><textarea ng-model="menu.description" placeholder=""> </textarea>
</label>
<label class="item item-input">
<span class="input-label">Price</span>
<input ng-model="menu.price" type="number" placeholder="">
</label>
</ion-list>
<div class="spacer" style="height: 40px;"></div>
<button class="button button-stable button-block " ng-click="addMenu()">Add Menu</button>
</form>
<hr>
<div ng-repeat="menu in menus">
<li>{{menu.id}}: {{menu.name}}</li>
</div>
</ion-content>
And Menuedit.html which is supposed to display the content to be edited
<ion-view title="Menus">
<ion-content padding="'true'" class="has-header">
<form class="list">
<div class="list card">
<div class="item item-divider">Edit Menu Item</div>
<div class="item item-body">
<ion-list>
<ion-item menu-close="" class="item-thumbnail-left">
<img>
<h2>Menu Item</h2>
<p>**Delicious</p>
</ion-item>
</ion-list>
<button class="button button-stable button-block ">Edit Picture</button>
</div>
</div>
<ion-list>
<label class="item item-input">
<span class="input-label">Name</span>
<input ng-model="addmenu.name" type="text" placeholder="">
</label>
<label class="item item-input">
<span class="input-label">Description</span><textarea ng-model="addmenu.description" placeholder=""> </textarea>
</label>
<label class="item item-input">
<span class="input-label">Price</span>
<input ng-model="addmenu.price" type="number" placeholder="">
</label>
</ion-list>
<div class="spacer" style="height: 40px;"></div>
<button class="button button-stable button-block " ng-click="updateMenu()">Update Menu</button>
</form>
<hr>
</ion-content>

I'm not 100% sure what's causing your problem, because I don't think you've provided enough information to say for certain. But I think it has to do with your client-side routing. In this: {{menu.name}}</li> you have what appears to be a link to a piece of your application. The ng-click will not allow the route change so your template is most likely still Menus.html instead of Menuedit.html.
I want to address how you've constructed this module, though. You have a lot of repetition in your templates that can be reduced with a simple flag on your scope. Using a flag such as $scope.isNew would allow you to use the ng-if directive to toggle certain HTML elements off and on, depending if you're editing or creating a new menu. I've added a bit of functionality as well, so bear with me.
I would set up your controller like this:
$scope.isNew = true; // flag to keep track of form state
$scope.menus = []; // initialize an empty array for the menus
$scope.menu = {}; // initialize an empty object for the form
var res1 = $http.get('mock.json');
res1
.success(function(data) {
$scope.menus = data;
})
.error(function (data) {
console.log("failure message: " + JSON.stringify(data));
});
$scope.clear = function() {
$scope.isNew = true;
$scope.menu = {};
}
$scope.submit = function(menu) {
if ($scope.isNew) {
$scope.menus.push(menu);
} else {
$scope.menus[$scope.currentIndex] = menu;
}
$scope.clear();
}
$scope.remove = function() {
$scope.menus.splice($scope.currentIndex, 1);
$scope.clear();
}
$scope.edit = function(menu, index) {
$scope.currentIndex = index;
$scope.isNew = false;
// this has to be copied so it's not two-way bound to the template
$scope.menu = angular.copy(menu);
}
As you can see, I've add an isNew flag and a clear function to the scope. I've also added a currentIndex to the scope for when editing is enabled. currentIndex is used when deleting an item (part of the functionality I added), since the button for deletion is sitting outside of the scope of the item being deleted. The clear function will reset the form and switch the isNew flag. I've changed the addMenu function in your original code to submit so that the term better represents its ability to submit an edit or new menu.
And now for the template:
<section class="has-header" ng-controller="MenuCtrl">
<button ng-if="!isNew" class="button button-stable button-block" ng-click="clear()">New Menu</button>
<form class="list">
<div class="list card">
<div class="item item-divider">Menu Item</div>
<div class="item item-body">
<div>
<div menu-close="" class="item-thumbnail-left">
<img>
<h2>Menu Item</h2>
<p>**Delicious</p>
</div>
</div>
<button class="button button-stable button-block ">Upload Picture</button>
</div>
</div>
<div>
<label class="item item-input">
<span class="input-label">Name</span>
<input ng-model="menu.name" type="text" placeholder="">
</label>
<br>
<label class="item item-input">
<span class="input-label">Description</span><textarea ng-model="menu.description" placeholder=""> </textarea>
</label>
<br>
<label class="item item-input">
<span class="input-label">Price</span>
<input ng-model="menu.price" type="number" placeholder="">
</label>
</div>
<div class="spacer" style="height: 40px;"></div>
<button class="button button-stable button-block " ng-click="submit(menu)">
<span ng-if="isNew">Add Menu</span>
<span ng-if="!isNew">Update Menu</span>
</button>
<button ng-if="!isNew" class="button button-stable button-block" ng-click="remove()">Delete Menu</button>
</form>
<hr>
<div ng-repeat="menu in menus track by $index">
<li>{{menu.id}}: <a ng-click="edit(menu, $index)">{{menu.name}}</a></li>
</div>
</section>
I've added a button at the top to create a new menu, that's only displayed if you're in edit mode. All it does is clear the form. I've added a check for isNew for the submit button as well, changing whether it says "Update" or "Add" based on isNew. And I added a "Remove" button, only shown when in edit mode. Hopefully I've explained my thinking clearly, because I feel like this is a much better approach to your problem. Feel free to ask questions for any clarifications. I've also created a Plunk to demonstrate all of this. http://plnkr.co/edit/gvP2iUahPjhzTmByPQw6?p=preview

Adding elements dynamically to an array

I was following a simple angular tutorial that basically shows a list of elements on the browser for a hard-coded array, and creates a form that adds more elements to this array and adds the new created elements on the browser directly.
After writing my code, I tried to add a new element to the array, but the implementation only adds a new element <li> without the title of it
see my code here on jsfiddle
https://jsfiddle.net/SaifHarbia/ht4jme7q/1/
the code is also posted below
my html
<div ng-app="bookmark" ng-controller="BookCtrl">
<ul>
<li ng-repeat="bookmark in bookmarks">
<a href="#" ng-click="setCurrentCategory(bookmark)">
{{bookmark.title}} </a>
</li>
</ul>
<button type="button" ng-click="startCreating();" class="btn btn-link">
<span class="glyphicon glipbicon-plus"></span>
Create Bookmark
</button>
<br><hr/>
<form class="create-form" ng-show="isCreating" role="form"
ng-submit="createBookmark(newBookmark)" novalidate>
<div class="form-group">
<label for="newBookmarkTitle">Bookmark Title</label>
<input type="text" class="form-control" id="newBookmarkTitle"
ng-mode="newBookmark.title" placeholder="Enter title">
</div>
<div class="form-group">
<label for="newBookmarkURL">Bookmark URL</label>
<input type="text" class="form-control" id="newBookmarkURL"
ng-mode="newBookmark.url" placeholder="Enter URL">
</div>
<button type="submit" class="btn btn-info btn-lg">Create</button>
<button type="button" class="btn btn-default btn-lg pull-right"
ng-click="cancelCreating()">Cancel</button>
</form>
</div>
my javascript:
var app=angular.module("bookmark", []);
app.controller("BookCtrl", function($scope){
$scope.bookmarks=[
{title: "Type1", url: "http://www.somewebsite.com/"},
{title: "Type2", url: "http://www.website.com/"}
]
function resetCreateForm(){
$scope.newBookmark={
title : '',
url:''
}
}
$scope.isCreating= false;
function startCreating(){
$scope.isCreating=true;
resetCreateForm();
}
function cancelCreating(){
$scope.isCreating = false;
}
function createBookmark(bookmark){
$scope.bookmarks.push(bookmark);
resetCreateForm();
}
$scope.startCreating= startCreating;
$scope.cancelCreating=cancelCreating;
$scope.createBookmark= createBookmark;
});

First, it's ng-model not ng-mode
and second, I added an ng-click to the create button, to push the newbookmark, and I removed the reset bookmark function
<div ng-app="bookmark" ng-controller="BookCtrl">
<ul>
<li ng-repeat="bookmark in bookmarks">
{{bookmark.title}}
</li>
</ul>
<button type="button" ng-click="startCreating();" class="btn btn-link">
<span class="glyphicon glipbicon-plus"></span>
Create Bookmark
</button>
<br><hr/>
<form class="create-form" ng-show="isCreating" role="form" ng-submit="createBookmark(newBookmark)" novalidate>
<div class="form-group">
<label for="newBookmarkTitle">Bookmark Title</label>
<input type="text" class="form-control" id="newBookmarkTitle" ng-model="newBookmark.title" placeholder="Enter title">
</div>
<div class="form-group">
<label for="newBookmarkURL">Bookmark URL</label>
<input type="text" class="form-control" id="newBookmarkURL" ng-model="newBookmark.url" placeholder="Enter URL">
</div>
<button type="submit" ng-click="createBookmark(newBookmark)" class="btn btn-info btn-lg">Create</button>
<button type="button" class="btn btn-default btn-lg pull-right" ng-click="cancelCreating()">Cancel</button>
</form>
</div>
and the javascript..
var app=angular.module("bookmark", []);
app.controller("BookCtrl", function($scope){
$scope.bookmarks=[
{title: "Type1", url: "http://www.hihi2.com/"},
{title: "Type2", url: "http://www.hihi2.com/"}
]
function resetCreateForm(){
$scope.newBookmark={
title : '',
url:''
}
}
$scope.isCreating= false;
function startCreating(){
$scope.isCreating=true;
resetCreateForm();
}
function cancelCreating(){
$scope.isCreating = false;
}
function createBookmark(bookmark){
// bookmark.id=$scope.bookmarks.length;
$scope.bookmarks.push(bookmark);
}
$scope.startCreating= startCreating;
$scope.cancelCreating=cancelCreating;
$scope.createBookmark= createBookmark;
});

You missed typed the ng-model as ng-mode for the elements newBookmarkTitle and newBookmarkURL. If you try now the following snippet, you will notice that works.
var app=angular.module("bookmark", []);
app.controller("BookCtrl", function($scope){
$scope.bookmarks=[
{title: "Type1", url: "http://www.hihi2.com/"},
{title: "Type2", url: "http://www.hihi2.com/"}
]
function resetCreateForm(){
$scope.newBookmark={
title : '',
url:''
}
}
$scope.isCreating= false;
function startCreating(){
$scope.isCreating=true;
resetCreateForm();
}
function cancelCreating(){
$scope.isCreating = false;
}
function createBookmark(bookmark){
// bookmark.id=$scope.bookmarks.length;
$scope.bookmarks.push(bookmark);
resetCreateForm();
}
$scope.startCreating= startCreating;
$scope.cancelCreating=cancelCreating;
$scope.createBookmark= createBookmark;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="bookmark" ng-controller="BookCtrl">
<ul>
<li ng-repeat="bookmark in bookmarks">
{{bookmark.title}}
</li>
</ul>
<button type="button" ng-click="startCreating();" class="btn btn-link">
<span class="glyphicon glipbicon-plus"></span>
Create Bookmark
</button>
<br><hr/>
<form class="create-form" ng-show="isCreating" role="form" ng-submit="createBookmark(newBookmark)" novalidate>
<div class="form-group">
<label for="newBookmarkTitle">Bookmark Title</label>
<!-- Here was the first problem-->
<input type="text" class="form-control" id="newBookmarkTitle" ng-model="newBookmark.title" placeholder="Enter title">
</div>
<div class="form-group">
<label for="newBookmarkURL">Bookmark URL</label>
<!-- Here was the second problem-->
<input type="text" class="form-control" id="newBookmarkURL" ng-model="newBookmark.url" placeholder="Enter URL">
</div>
<button type="submit" class="btn btn-info btn-lg">Create</button>
<button type="button" class="btn btn-default btn-lg pull-right" ng-click="cancelCreating()">Cancel</button>
</form>
</div>

Why doesn't my angular controller function get called?

Ze HTML:
<body ng-app="ReporterApplication" ng-controller="BootstrapController as bootstrap">
<div><% boostrap.user %></div>
<div id="pagePreloader"></div>
<div ng-if="!bootstrap.user.logged" ng-controller="LoginController as login" class='site-wrapper-login'>
<form role="form" name="login" class="form-login">
<div class="logo-wrapper">
<img class="logo" src="/resources/images/logo.png">
<div class="logo-text">
<div class="reporter">Reporter</div>
<div class="application">Internal Application</div>
</div>
</div>
<div class="icon-input large">
<i class="icon fa fa-user"></i>
<input ng-model="login.username" type="text" name="reg_username" class="input-text" id="username" placeholder="Enter Username">
</div>
<div class="icon-input large">
<i class="icon fa fa-lock"></i>
<input ng-model="login.password" type="password" name="reg_password" class="input-text" id="password" placeholder="Enter Password">
</div>
<button class="button full large" ng-click="login.submit()">Login</button>
</form>
</div>
and ze rezpective JS:
Application.controller('LoginController', ['$scope', 'ServerActions', function($scope, ServerActions)
{
console.log('WE LOGIN!');
var login = this;
login.username = "";
login.password = "";
login.submit = function () {
console.log('SUBMIT');
ServerActions.fetchData('login.action', {username: login.username, password: login.password}).then(
function (response) {
console.log('SUBMIT SUCCESS');
}
);
}
}]);
For some reason my submit function doesn't get called. Why is that? What am i doing wrong? Why does god hate me!?!??! Is there something about controllers stacking that interferes with the way i expect the code to work?

<form name=login> this is actually creating a global variable name from your form element, therefore it is conflicting with the name you've given to your controller. Either remove the name from the form:
<div ng-controller="LoginController as login" class='site-wrapper-login'>
<form role="form" class="form-login">
</form>
</div>
Or else rename your controller as variable:
<div ng-controller="LoginController as loginCtrl">
Example Fiddle

How to load form with values based on Angular $resource

I want CRUD operations so that when a user clicks on any particular item to edit this form will be filled with those values (that the user wants to edit).
Here is my code .
storeView.html
<tr data-ng-repeat="store in stores | filter:search | orderBy:'name'">
<td>
{{ store.name }}
</td>
<td class="icons-width">
<a href="#/Store/edit/{{store._id}}" id="edit" data-toggle="tooltip">
<i class="fa fa-pencil fa-fw colorInfo" ></i>
</a>
<a ng-click="deleteStore(store._id)" id="delete" data-toggle="tooltip">
<i class="icon-trash"></i>
</a>
</td>
</tr>
So when a user clicks on edit for a particular store it will go to another view which has the a form that will show which values the user wants to edit.
storeformView.html
form class="form-horizontal" name="store_form" novalidate ng-submit='AddStore()'>
<div class="modal-header">
<h3>Create/Edit Store</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label for="store_Name" class="col-lg-4 form-label">Name:</label>
<div class="col-lg-7">
<input type="text" class="form-control" ng-model="store.name" id="store_Name" name="store_Name" placeholder="Store Name" required/>
<div class="error" ng-show="store_form.store_Name.$dirty && store_form.store_Name.$invalid">
<small class="error errorFields" ng-show="store_form.store_Name.$error.required">
Store Name is required.
</small>
</div>
</div>
</div>
<div class="form-group">
<label for="store_AddressLine1" class="col-lg-4 form-label">Address Line 1:</label>
<div class="col-lg-7">
<input type="text" class="form-control" ng-model="store.address1" id="store_AddressLine1" name="store_AddressLine1" placeholder="Address Line 1" required/>
<div class="error" ng-show="store_form.store_AddressLine1.$dirty && store_form.store_AddressLine1.$invalid">
<small class="error errorFields" ng-show="store_form.store_AddressLine1.$error.required">
Address is required.
</small>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" ng-disabled="store_form.$invalid">
<i class="icon-ok-sign icon-white"></i> Save
</button>
<a class="btn btn-default" href="#/Stores">
<i class="icon-remove-circle" ></i>
Cancel
</a>
</div>
</form>
storeFactory.js
app.factory('Store', function ($resource) {
return {
getAllStores : $resource("/store/list" ,{},{ TypeGetStores:{method: 'get', isArray:true}}),
getStore : $resource("/store/:id" ,{id : #id},{ TypeGetStore:{method: 'get'}}),
};
});
app.js
var app = angular.module('myApp', ['ngCookies','ngResource', 'ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/Stores',
{
templateUrl: '/app/partials/StoresListView.html'
})
.when('/Store/edit/:storeId',
{
templateUrl: '/app/partials/StoreFormView.html'
})
.otherwise({ redirectTo: '/Login' });
});

For loading information about your store, you can use resolve parameter in routeProvider :
.when('/Store/edit/:storeId',
{
templateUrl: '/app/partials/StoresListView.html',
resolve: {app: function($scope,Store,$routeParams) {
$scope.store = Store.getStore({id:$routeParams.id})
}
}
If everything is right and that's how your factory will work (if that function really returns store. Maybe it returns JSON with root, then you should specify, how to get store from that JSON), than you will have $scope.store in your controller, and it will be two-way-binded with what you have in form.
Note: page will load only after resolve is fully done.