View results of a search in the same View AngularJS - angularjs

First sorry for my bad english. I'm developing an app to be able to study and was putting everything on the controller, all queries and all. But then I decided to pass it to a service (vi which is the right to do so), only when I queries for my search service just stopped working.
In the template I list all registered categories and it has an input, which makes the search all registered establishments in the DB. I wish that when you do a search, the list simply update with a new, only listing the results of this search.
When I try to do a search, the following error appears:
Object {message: "sqlite3_bind_null failure: bind or column index out of range", code: 0}
And so are all related to this template code and the search:
Service.js
app.service('Market', function($cordovaSQLite, DBA) {
var self = this;
self.allCategories = function() {
return DBA.query("SELECT id, category_name FROM tblCategories")
.then(function(result){
return DBA.getAll(result);
});
}
self.searchAll = function(nameSearch) {
var parameters = [nameSearch];
return DBA.query("SELECT id, place_name FROM tblPlaces WHERE place_name LIKE '%(?)%'", parameters)
.then(function(result) {
return DBA.getAll(result);
});
}
return self;
})
Controller.js
app.controller('CategoriesCtrl', function($scope, Market) {
$scope.categories = [];
$scope.categories = null;
$scope.items = [];
$scope.items = null;
var nameSearch = '';
$scope.searchkey = '';
$scope.myClick = function (search) {
nameSearch = search;
console.log(nameSearch);
$scope.searchResult = function(nameSearch) {
Market.searchAll(nameSearch).then(function(items) {
$scope.items = items;
console.log(items);
});
}
$scope.searchResult();
};
$scope.listAllCategories = function() {
Market.allCategories().then(function(categories) {
$scope.categories = categories;
});
}
$scope.listAllCategories();
})
Categories.html
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="text" placeholder="Search" name="key" autocorrect="off" ng-model="searchkey">
</label>
<button class="button" ng-click="myClick(searchkey)">Buscar</button>
</div>
<ion-list>
<ion-item ng-repeat="category in categories">{{category.category_name}}</ion-item>
</ion-list>

Related

Save the value of a service in a variable

I must fill a combo to be able to select the value that the user wanted I have managed to do this with the data stored in an array, the next step is to consult a service and use the return values
<html>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="text">ObjectType:</label>
<input type="text" ng-model="type" ng-keyup="complete(type)" class="form-control" placeholder="Search"/>
<ul class="list-group">
li class="list-group-item" ng-repeat="data in filterType" ng-click="fillTextbox(data)">{{data}}</li>
</ul>
</div>
</div>
</html>
var app = angular.module("Trace", []);
app.controller('TraceControlles', function ($scope, $http) {
//$scope.typeList = ["integration", "none"];
$scope.typeList = [];
$scope.loadTypes = function () {
$http.get("/api/Trace/GetObjectType")
.then(function (responce) {
$scope.typeList = responce.data;
}, function errorCallback(responce) {
});
}
$scope.complete = function (string) {
var output = [];
angular.forEach($scope.typeList, function (type) {
if (type.toLowerCase().indexOf(string.toLowerCase()) >= 0) {
output.push(type);
}
});
$scope.filterType = output;
}
$scope.fillTextbox = function (string) {
$scope.type = string;
$scope.filterType = null;
}
});
146/5000
When running the web api the service return values are not loaded, the browser does not mark any syntax error or anything like that.

Angular ion-radio filter data from external db

I have 2 tables in Azure db 1 called team and 1 called league, the id in league is also associated to a team e.g. team a belongs to leagueID 1. I am trying to use ion-radio so users can choose their team but filter it by the league but cannot work out whether ng-if or filter is the best option. I have set up a service to call the data from azure: services.js
.factory('League', function ($ionicPopup) {
var url = 'http://';
var client = new WindowsAzure.MobileServiceClient(url);
var LeagueTable = client.getTable('League');
function refreshDisplay() {
return LeagueTable
.read()
.then(createList, handleError);
}
function createList(items) {
return items;
}
function handleError(error) {
var LeagueName = error + (error.request ? ' - ' + error.request.status : '');
console.error(LeagueName);
console.log('error', error.request.status);
if (error.request.status == '0' || error.request.status == '404') {
$ionicPopup.alert({
title: 'Connection Failure',
template: 'Connection with backend can not be established.'
});
}
}
return {
all: function () {
return refreshDisplay();
},
};
})
.factory('Team', function ($ionicPopup) {
var url = 'http://';
var client = new WindowsAzure.MobileServiceClient(url);
var TeamTable = client.getTable('Team');
function refreshDisplay() {
return TeamTable
.read()
.then(createTeamList, handleError);
}
function createTeamList(items) {
return items;
}
function handleError(error) {
var text = error + (error.request ? ' - ' + error.request.status : '');
console.error(text);
console.log('error', error.request.status);
if (error.request.status == '0' || error.request.status == '404') {
$ionicPopup.alert({
title: 'Connection Failure',
template: 'Connection with backend can not be established.'
});
}
}
return {
all: function () {
return refreshDisplay();
},
}
});
The controller at the moment just pulls back all the teams, controller.js:
.controller('LeagueCtrl', function ($scope, $window, League) {
$scope.doRefresh = function () {
League.all().then(function (newList) {
$scope.items = newList;
$scope.$broadcast('scroll.refreshComplete');
$scope.$apply();
});
};
$scope.doRefresh();
console.log(League);
$scope.League;
})
.controller('TeamCtrl', function ($scope, $window, Team) {
$scope.doRefresh = function () {
Team.all().then(function (newList) {
$scope.items = newList;
$scope.$broadcast('scroll.refreshComplete');
$scope.$apply();
return $scope.items
});
};
$scope.doRefresh();
});
And the HTML teams.html:
<ion-view view-title="Choose your Team">
<ion-nav-buttons side="primary">
</ion-nav-buttons>
<ion-content>
<ion-refresher pulling-text="Pull to refresh..."
on-refresh="doRefresh()">
</ion-refresher>
<div ng-controller="SportCtrl">
<h2> Choose sport</h2>
<ion-radio ng-model="item.complete" ng-repeat="item in items" > {{item.text}}</ion-radio>
</div>
<div ng-controller="LeagueCtrl">
<h2> Choose Conference</h2>
<ion-radio ng-model="item.complete" ng-repeat="item in items"> {{item.LeagueName}}</ion-radio>
</div>
<div ng-controller="TeamCtrl">
<h2> Choose Team</h2>
<ion-radio ng-model="item.complete" ng-repeat="item in items"> {{item.TeamName}}</ion-radio>
</div>
<div >
<button class="button button-large-font-size button-block button- assertive" ui-sref="app.home">Booyah</button>
</div>
</ion-content>
</ion-view>
Can anyone point me in the right direction
As the scopes in different controller are separate, so there is a simple solution, you can put the League and Team in a same controller and in a same scope, then you can custom a filter function in your controller to achieve your requirements.
Generally:
<div ng-controller="LeagueTeamCtrl">
<h2> Choose Conference</h2>
<ion-radio ng-model="data.league_id" ng-repeat="item in league" ng-value="item.id">{{item.LeagueName}}</ion-radio>
<h2> Choose Team</h2>
<ion-radio ng-model="data.team_id" ng-repeat="item in team" ng-value="item.id">{{item.TeamName}}</ion-radio>
</div>
And the custom filter function:
$scope.myFilter = function (item) {
return item.leagueId === $scope.league_id ;
};
And you can refer to the full example at http://codepen.io/liuguixiao/pen/ZpYLAB

Meteor application crashing while calling last message

In one of controller I'm trying to list all online users and their last message. But the browser is unresponsive while running the below code.
In app.js
angular.module('jaarvis').controller('OnlineUsersCtrl', ['$scope', '$meteor', function ($scope, $meteor) {
$scope.$meteorSubscribe('users');
$scope.$meteorSubscribe('chats');
var query = {};
query['status.online'] = true;
var online = $meteor.collection(function(){
return Meteor.users.find(query, {fields: {'_id':1, 'profile.name':1, 'status.online':1}});
});
$scope.onlineusers = online;
$scope.getLastMessage = function(userId) {
var query = {};
query['uid'] = userId;
var lastMessage = $meteor.collection(function(){
return Chats.find({'uid':userId}, {fields: {'content':1}}, {sort: {'_id': -1}, limit: 1});
});
return lastMessage;
};
}]);
In HTML
<div class="list">
<a class="item item-avatar" href="/onetoonechat/{{onlineuser._id}}" ng-repeat="onlineuser in onlineusers">
<img src="venkman.jpg">
<h2>{{onlineuser.profile.name}}</h2>
<p>{{ getLastMessage(onlineuser._id) }}</p>
</a>
</div>
Correct if there is any mistake in my code or provide alternative solution.

Display dropdown on tick of checkbox

// I have written java code to fetch data from mongo-db. What i need to do is on tick of checkbox button i have to display those data in drop-down menu using angular-js and bootstrap. Nothing is happening after doing these code.
.html page
<div ng-controller="release">
<div class="col-md-2 col-centered col-fixed">
<label for="cloneRelease" translate="release.form.cloneRelease">CloneRelease</label>
</div>
<div>
<input type="checkbox" ng-model="ticked">
<div class="dropdown-menu" ng-repeat="release in releaseName" ng-show="ticked">{{release.name}}</div>
</div>
</div>
controller.js
releaseApp.controller('release', function($scope, $location, $http, ReleaseNameService){
$scope.releaseName = [];
init();
function init(){
ReleaseNameService.getReleaseName().then(function(data){
$scope.releaseName = data;});
console.log('inside controller: '+$scope.releaseName);
}
});
service.js
releaseApp.factory('ReleaseNameService', function($http){
var releaseName = [];
var factory = {};
factory.getReleaseName = function(){
return $http.get('release/fetchAllReleaseDetails').then(function(response){
releaseName = response.data;
console.log('inside service method'+ releaseName);
return releaseName;
});
};factory;
});
It is simple, u need to bind checkbox with ng-model:
<input type="checkbox" ng-model="ticked">
If its ticked $scope.ticked return true, else return false. If true show data, if false hide it (with ng-show)
Here is an example in jsFiddle without css ofc.
http://jsfiddle.net/RLQhh/2282/
UPDATE:
recreateing case with service.
service.js
app.factory('dataService', function ($http) {
var dataObject= {
async: function () {
var promise = $http.get('data/').then(function (response) {
return response;
});
return promise;
}
};
return dataObject;
})
controller.js
$scope.dataTest = [];
$scope.ticketed = false;
var getData = function(){
dataService.async().then(function (d) {
$scope.dataTest = d.data;
});
}
getData();
html
<input type="checkbox" ng-model="ticketed">
<div ng-show="ticketed" ng-repeat="dat in dataTest">
{{dat.name}}
</div>
...this is tested case so it should work with yours
You can make a REST call to fetch the data from your java function and store it in scope.Then you can use ng-repeat to display data in dropdown.
Here is a very good article on how to do it.
http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/06/29/how-to-work-with-the-bootstrap-dropdown-in-angularjs.aspx

to update in ng-rpeat angularjs

I want to update username in ng-repeat directive. I am able to edit if I take a variable but unable to do so in an array. Here title is a variable and users is an array. I want to update a user's name
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app>
<div ng-controller="ClickToEditCtrl">
<div ng-hide="editorEnabled">
{{title}} {{name}}
<br>users
<ul> <li ng-repeat="(key,u) in users">
{{key+1}} name: {{u.name}} Edit title
</li></ul>
</div>
<div ng-show="editorEnabled">
<input ng-model="editableTitle" ng-show="editorEnabled"><br><br>
<input ng-model="editableUserName" ng-show="editorEnabled">
Save
or
cancel.
</div>
</div>
</div>
<script>
function ClickToEditCtrl($scope) {
$scope.title = "Welcome to this demo!";
$scope.users = [{'name':'A'},{'name':'B'}];
$scope.editorEnabled = false;
$scope.enableEditor = function(name) {
$scope.editorEnabled = true;
alert(name);
$scope.editableTitle = $scope.title;
$scope.editableUserName = name
};
$scope.disableEditor = function() {
$scope.editorEnabled = false;
};
$scope.save = function() {
$scope.title = $scope.editableTitle;
$scope.users.name = $scope.editableUserName;
$scope.disableEditor();
};
}
</script>`
`
Ideally, you'd like to have an id which doesn't change that associates to each user.
This plunker is your answer plunker
I have gone and used the $index of the array as an id, but ideally you should give each user an id
ng-click="enableEditor($index)"
I have also altered some of your functions to record the index
For the edit pass in the user you are editing:
Edit title
Then store a reference to that user.
var editableUser;
$scope.enableEditor = function(user) {
$scope.editorEnabled = true;
$scope.editableTitle = $scope.title;
$scope.editableUserName = user.name;
editableUser = user;
};
Then in the save, save the changes to the user:
$scope.save = function() {
$scope.title = $scope.editableTitle;
editableUser.name = $scope.editableUserName;
$scope.disableEditor();
};
http://plnkr.co/edit/2VZk2Ej6DR4g51MjiC3j?p=preview

Resources