Iam able to display and filter search results in the same view..But how can i create search box in header navbar which is common to all pages. On click of search button should open the separate page and should load the search results alphabetically from json array based on the value entered in search box. How to do this? Kindly help
This is one way of attacking your problem. If i understood your problem correctly you wanted to filter out a JSON array...
So lets say in mainCtrl we have this:
$http({
method: 'GET',
url: '/Users'
}).then(function successCallback(response) {
$scope.usersJson = response;
}, function errorCallback(response) {
console.error("Something Happened...");
});
So lets say that data above gives us a sample of Users that look like this:
"Username" : {
"name" : "Username",
"value" : "Hello World"
}
Then in our html if we want to go through the data:
<body ng-app="app" ng-controller="mainCtrl">
<input type="text" ng-model="search" />
<p ng-repeat="message in messages | filter: search">
Name: {{ message.name }}
Message : {{message.value}}
</p>
</body>
You have to learn more about the ngFilter Directive and Filtering in AngularJS In general.. Here is the docs about it.. Hope this helped!
EDIT
If you want to do this in multiple controllers, just make a service to serve as a communication beetween controllers...
app.service("jsonArray", function($scope){
this.getArray = function(){
$http({
method: 'GET',
url: '/Users'
}).then(function successCallback(response) {
return response;
}, function errorCallback(response) {
console.error("Something Happened...");
});
}
})
Now you can inject this service to a controller and simply do jsonArray.get() to get the JSON List..
How to inject service into controller?
Sample:
app.controller('mainCtrl', ["$scope", "jsonArray", function($scope, jsonArray){
}])
Hope this helped..
Related
This question already has an answer here:
Add boolean checkboxes ng-model to object AngularJS
(1 answer)
Closed 4 years ago.
I am trying to add a checkboxes in ng-repeat, and then post with $http checked values.
Here is my code :
$scope.add_to_post = function(n){
console.log("name",n);
$http({
method: 'POST',
url: url,
data: $.param({
name: n,
}),
withCredentials: true,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
})
.then(function successCallback(data) {
console.log('post');
}, function errorCallback(response) {
console.log(response);
console.log('error');
});
};
HTML:
<div >
<ul ng-repeat="x in messages" style="list-style:none;">
<li>
{{x.name}}
<input type="checkbox" ng-click="add_to_post(x.name)"/>
</li>
</ul>
<button ng-click="post()">post</button>
I want option that I check some checkboxes, then I click post and $http calls are running.
My plunker : http://next.plnkr.co/edit/zPu9DH0JyinlBvLh
Thanks for answers and help in advance!
In your controller you can create an object for storing the models (ng-model) for your checkboxes like this:
$scope.modelCheck = {};
then in the html you can bind them like this:
<input type="checkbox" ng-model="modelCheck[x.name]"/>
finally, when you are going to do the POST collect the check boxes name which where marked as true like this:
$scope.post = function(){
var data = [];
for (var k in $scope.modelCheck) {
// `k` is own property (checkbox name) and its value is `true`
if ($scope.modelCheck.hasOwnProperty(k) && $scope.modelCheck[k]) {
data.push({'name': k});
}
}
console.log(data);
// do with data as you wish from here
};
See this Forked working plunker (see the console)
I cannot get some data from my factory:
.factory("userDataFactory", function(){
var user;
var user_notes;
var interfaz = {
getUsuario: function(){
return user;
},
getNotes: function(){
return user_notes;
},
nuevoUsuario: function(userId, email){
user = [userId, email];
},
addNotes: function(notes){
user_notes = notes;
}
}
return interfaz;
})
What I do first is to populate the factory with data from my Ruby Api using this code:
$http({
method : "POST",
url: "http://localhost:3000/api/v1/checkuser",
data: json
}).then ( function mySucces(response){
userDataFactory.nuevoUsuario(response.data.user[0].id, response.data.user[0].email);
userDataFactory.addNotes(response.data.notes);
$state.go('thirdday');
And later on Im calling my factory in a new controller:
.controller('ListNotes', function($scope, userDataFactory, $state){
$scope.notes = userDataFactory.getNotes();
console.log($scope.notes);
//console.log($scope.notes[0].note1);
})
and finally, trying to show it in my html (listnotes.html)
<div class="list">
<a class="item" href="#" ng-repeat="x in notes">
{{ x.note2 }}
</a>
</div>
my routes config just in case:
.state('list',{
url: '/listnotes',
templateUrl: 'templates/listnotes.html',
controller: 'ListNotes'
})
so, what am I missing? why is not showing all the notes I got from the API?
Thanks in advance
EDIT
After I get the data from my API I go to 'thirdday.html' view and I just press a button to go to the list view.
.state('thirdday',{
url: '/thirdday',
templateUrl: 'templates/thirdday.html',
controller: 'Notes'
})
In your factory 'user_notes' contains object with key 'note1' (according to your log statement console.log($scope.notes[0].note1)). and in ng-repeat you are using x.note2. Make it x.note1.
try to add notes {{notes}} in html. see if it has value in there.
may be you just not add ng-app or ng-controller or someting in the mark up
I have defined a controller like this :
app.controller("home", function ($scope, $http, $common) {
$http({
method: "GET",
url: '/posts/loadData'
}).then(function (response) {
//console.clear()
if (typeof response.data.posts != 'undefined') {
console.log(response.data.posts);
$scope.posts = $common.arrangePosts(response.data.posts);
}
});
})
and a service to arrange data :
app.service('$common', function ($timeout, $sce, $httpParamSerializerJQLike) {
var that = this;
this.arrangePosts = function (rawPosts) {
var posts = [];
$.each(rawPosts, function (key, value) {
posts.push({
postId: value.postId,
postLink: '/post/' + that.cleanString(value.title) + '/' + value.postId,
title: value.title,
summary: $sce.trustAsHtml(value.summary)
});
});
return posts;
}
});
using values in html like this :
<div class="widget fullwidth post-single">
<h4 class="widget-title">Latest</h4>
<div class="widget-content">
<ul>
<li ng-repeat="post in posts">
<h4 class="list-title">{{post.title}}</h4>
{{post.summary}}
</li>
</ul>
</div>
</div>
Data coming from server in JSON form :
Object { postId="4", title="asdf", summary="<p>asdf</p>"}
but all the html tags are printing on my page as it is (like a text) in summary.
In many SO posts people suggested to use $sce.trustAsHtml but its not working for me. Please suggest anyway to solve my problem.
Any help will be appreciated..!!
have you tried this?
<div ng-bind-html='post.summary'></div>
You could solve this over a directive. Did you know, that you can use JQuery Lite inside AngularJS to manipulate the DOM?
Here a quick example:
angular.module("PostsDirective",[])
.directive("posts", function($sce){
return {
link: function($scope, $element, $attrs){
//the HTML you want to show
var post = "<div>hello world</div>";
var posts = [post,post,post,post];
//iterating through the list (_.each is a function from underscore.js)
_.each(posts, function(element){
//if you want to save the trusted html string in a var you can do this with getTrustedHtml
//see the docs
var safeHtml = $sce.getTrustedHtml($sce.trustAsHtml(element));
//and here you can use JQuery Lite. It appends the html string to the DOM
//$element refers to the directive element in the DOM
$element.append(safeHtml);
});
}
};
});
And the html
<posts></posts>
This also pretty nice for the readability for your HTML code. And you can use it everywhere on your page.
BTW:
As i can see, you get the HTML elements directly from a REST-Service. Why don't you get just the data and insert it into the ng-repeat? If you transfer all the HTML you get a pretty high overhead if you have loads of data.
This is a newbie question about Angular 1.4.
My Main Question
I have the following search view:
'use strict';
var module = angular.module('myapp.search', ['ngRoute', 'ngResource']);
module.config(function ($routeProvider) {
$routeProvider.when('/search', {
templateUrl: 'search/search.html',
controller: 'SearchCtrl'
});
});
module.factory('Search', function ($resource) {
return $resource('http://www.myapp.com/api/search', {}, {
query: {
method: 'GET',
params: {},
isArray: false
}
});
});
module.controller('SearchCtrl', function ($scope, Search) {
$scope.results = [];
$scope.query = '';
$scope.doSearch = function (query) {
Search.query({q: query}).$promise.then(function (result) {
$scope.results = result.results;
});
};
});
And the partial HTML (search.html):
#search.html
<input placeholder="search" ng-model="query" />
<button ng-click="doSearch(query)" />
<h1>Results</h1>
<ol>
<li ng-repeat="result in results">{{ result }}</li>
</ol>
...
This works perfectly, the problem is when I want to put the search input in a toolbar (defined in index.html):
#index.html
<div ng-controller="SearchCtrl">
<div class="toolbar">
<input placeholder="search" ng-model="query" />
<button ng-click="doSearch(query)">
</div>
...
In this case, by pushing the search button the query is executed in the back-end but the results are not updated in $scope. what's wrong? I've tried calling $scope.$apply() with no luck. I'm lost with this.
Bonus Question
Given that the search functionality is in the toolbar (always visible) users can execute queries in any place of the website. How can I redirect the response to http://www.myapp.com/search?
Thanks in advance.
You have two distinct instances of SearchCtrl, each with its own distinct scope: one in the navbar (dur to ng-controller="SearchCtrl"), and one in the main view (due to controller: 'SearchCtrl').
So the search in the navbar modifies the scope of the navbar controller, and the scope of the main view doesn't know anything about it.
If you want to got to the search main view when something is searched in the navbar, simply use
$location.url('/search?query=' + theEncodedQueryTypedByTheUser);
And in the search route's resolve function, or in its controller, get the route param named query, send the HTTP request, and update the scope with the results.
I'm writing a small test application where I can retrieve my customers from a parse.com database.
I have the following form in html
...
<body ng-app="myApp">
<div ng-controller="CustomerController">
<button ng-click="getCustomers()">Get customers</button>
<ul>
<li ng-repeat="customer in customers">{{ customer.name }}</li>
</ul>
</div>
</body>
...
My angular app is the following:
Module
var app = angular
.module('myApp', ['ngResource'])
.constant('myConfig', {
'api_url': 'https://api.parse.com/1/classes/',
'parse_application_id': 'xxxxxxxxxxxxx',
'parse_rest_api_key': 'xxxxxxxxxxxxx'
});
Factory
app.factory('CustomersService', function($resource, myConfig) {
return $resource(myConfig.api_url + 'Customer', {}, {
query: {
method: 'GET',
isArray: false,
headers: {
'X-Parse-Application-Id': myConfig.parse_application_id,
'X-Parse-REST-API-Key': myConfig.parse_rest_api_key
}
},
create: {
method: 'POST',
headers: {
'X-Parse-Application-Id': myConfig.parse_application_id,
'X-Parse-REST-API-Key': myConfig.parse_rest_api_key
}
}
})
});
Controller:
app.controller('CustomerController', function($scope, CustomersService, CustomerService) {
$scope.getCustomers = function() {
CustomersService.query().$promise.then(function(result) {
$scope.customers = result.results;
});
};
});
So when I click my button, everything works like it should.
But I also want to add a filter by name when I want to retrieve customers from the database.
When I execute the following in Postman
https://api.parse.com/1/classes/Customer?where={"name":"aaaaa"}
this works and only gets the customer with the name "aaaaa". So I know that the syntax is OK.
So I will add a textbox where the user can enter a customername and after that I want to click on the search button.
But how can I manage the ?where={"name":"aaaaa"} into the angular stuff when I click the button? I also want to expand the filter with other columns from that customer.
Something like this should work (assuming everything goes in the where object)
Add some search fields that bind to a scoped object's properties. We'll call it search
<label for="search_name">Name</label>
<input type="text" ng-model="search.name" name="name" id="search_name">
<label for="search_city">City</label>
<input type="text" ng-model="search.city" name="city" id="search_city">
Then you can execute the query action with
CustomersService.query({where: $scope.search}).$promise...
That should create a query param like
?where=%7B%22name%22%3A%22aaaaa%22%2C%22city%22%3A%22London%22%7D
which is the URI encoded value
?where={"name":"aaaaa","city":"London"}