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
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.
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
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.
// 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
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