i'm quite new to Angular JS so this is probably a easy question to answer.
I have the following code. Which displays a JSON Array with several Locations, descriptions and so on. Outputting the whole thing works. And searching the field place works also .
However as I have different pages, where I want to output only lets say all locations were place is "Canada". I thought i could just use "Canada" as value="Canada" in my input with ng-model="search.place" to output only places in "Canada" . However that does not work. It seems like ng-model causes the value to disappear. Typing in "Canada" in the input however works like a charm.
How can i overcome this? ;)
<div ng-controller="IndexCtrl">
<div class="topcoat-list__container">
<input ng-model="search.place" >
<ul class="topcoat-list">
<li class="topcoat-list__item" hm-tap="open(myApp.item_id)" ng-repeat="item in items | filter:search ">
<h2>{{ item.name }}</h2>
{{item.description}}
</li>
</ul>
</div>
</div>
EDIT: This is my Controller:
myApp.controller('IndexCtrl', function ($scope, Restangular) {
// Fetch all objects from the local JSON (see app/models/myApp.js)
$scope.items = Restangular.all('item').getList();
});
EDIT2
I found an answer:
$scope.items = $filter("filter")($scope.items, {place: "Canada"});
This works and accepts also multiple parameters as {place: "Canada", price: 10}
$scope.search.place="Canada"; in the controller should do it.
Take a look at the 4th step of the AngularJS tutorial to understand the two way databinding.
Related
I am getting the Array Response ["item1","item2"] from the server. but i want to display the data as item1 and item2 in one by one in UI using angularjs. So, Please give me the solution?
use ng-repeat
<span ng-repeat="item in items">{{item}}</span>
First of all, your response is wrong for your requirement I guess. I should be {"items":["veg", "rotis", "Dalu"]}, then you can assign to a scope like $scope.items = yourResponse.items; in controller and in html you can ng-repeat it like,
<span ng-repeat="item in items" ng-bind="item"></span>
and if you can't change your response, if it had to come like you mentioned, then you can do it in following way.
in controller,
var items = yourResponse.items[0];
$scope.items = items.split(',');
html same as above,
<span ng-repeat="item in items" ng-bind="item"></span>
I'm having a problem creating a dynamic number of select to use for filtering an ng-repeat.
I'm loading from a JSON object that looks like this:
[
{"filter":"Age",
"options": ["Young", "Middle-aged", "Old"]
},
{"filter":"Color",
"options": ["Blue", "Red", "Yellow"]
}
]
I don't have access to the code I used to generate the HTML, but I can get the selects and options formatted correctly using ng-repeat or ng-options, but no matter what, I can't get it to actually filter my data. If I just hard code the HTML for the select, it works fine, so the only difference is that in the generated version, there's an extra div on the outside with the ng-repeat line. Sorry that I don't have the code on me, but I can try to write up something similar if someone needs to see something similar to it.
Essentially, the final product, if I just hard code it, looks like this and if I generate it, the outside div just has an extra ng-repeat="person in people".
<div>
<label>Age:</label>
<select ng-model="query.age">
<option value="Young">Young</option>
<option value="Middle-aged">Middle-aged</option>
<option value="Old">Old</option>
</select>
</div>
I think the problem is because of scoping. I found that if I just have {{person.age}} somewhere on the page, it works in the hard coded version and not in the generated, but I don't know what the best way to fix it is. I know that child scopes can't directly be accessed by parent scopes, so I was wondering what the best way to structure this would be.
EDIT:
This Plnkr is what I mean. I can't get generated selects to work at a filter. If I hard code them, it works fine, but just the generated ones don't seem to do anything.
If I understand you correctly, this should work:
ANGULAR:
angular
.module('testApp', [])
.controller('MyCtrl', function($scope) {
$scope.items =
[
{"filter":"Age",
"options": ["Young", "Middle-aged", "Old"]
},
{"filter":"Color",
"options": ["Blue", "Red", "Yellow"]
}
];
});
HTML:
<div ng-controller="MyCtrl">
<div ng-repeat="item in items">
<label>{{ item.filter }}:</label>
<select ng-options="o for o in item.options"
ng-model="item.selected"></select>
</div>
</div>
Here is a Plnkr
UPDATE
If you want to apply a filter on this you can use the following code in the ng-repeat
<div ng-repeat="person in people | filter: (items | filter: { filter: 'age' })[0].selected">
{{ person.name }}
</div>
Updated Plnkr
I have following Service-Function, that will return data, which I want to display (notice, that the data can change any time):
myService.getData(); // Returns an array
I have to use a service, since I need this data in other controller/services too.
Now I am not sure, what the best practicse is, too display the data in a template. What I do, is:
Example 1
<li ng-repeat="item in myService.getData()">
{{item.name}}
</li>
Its working fine, but is it best practice?
I also tried following:
Example 2
// In my controller:
$scope.data = myService.getData();
// In the template
<li ng-repeat="item in data" ng-controller="myCtrl">
{{item.name}}
</li>
This does not work (on page load the data is get once into $scope.data. Any Updates are ignored). I guess I could use $watch (to watch myService.getData()). But I guess that´s slower.
What do you think? Can I call a service in a template (like example 1)?
Thank you very much!
use this as a second example(best practice):
// In my controller:
$scope.service= myService
// In the template
<li ng-repeat="item in service.getData()" ng-controller="myCtrl">
{{item.name}}
</li>
I want to select only the first instance of an array in angular instead of using ng-repeat. I was thinking something like ng-instance, or ng-specificinstance but they don't exist. Also how should I define my javascript variable and what is the standard for referencing it in my html: "phoneinfos" or "phoneinfo" if its only one entity. Also should all things with lots of items should it always end in an s?
Current HTML:
<div id="searchtab-1" style="height:1.5em;" ng-controller="PhoneListCtrl">
<label ng-repeat="phoneinfo in phoneinfos">{{phoneinfo.count}}</label>
</div>
HTML Attempt:
<div id="searchtab-1" style="height:1.5em;" ng-controller="PhoneListCtrl">
<label ng-instance="phoneinfo">{{phoneinfo.count}}</label>
</div>
javascript:
Defined variable:
$scope.phoneinfo = [{ 'count': '555' }, {'type': 'mobile'}];
What about:
<div id="searchtab-1" style="height:1.5em;" ng-controller="PhoneListCtrl">
<label>{{phoneinfo.count}}</label>
</div>
Javascript:
$scope.phoneinfo = {
count: '555',
type: 'mobile'
};
If you actually need the data to stay exactly as is, you could do this as well (but it doesn't look very pretty to me):
<div id="searchtab-1" style="height:1.5em;" ng-controller="PhoneListCtrl">
<label>{{phoneinfos[0].count}}</label>
</div>
As for the names ending in s, I find it a good practice for the exact reason that you can write item in items, and it also signals that it's an array, but that is a matter of personal taste.
I want to filter results from a subreddit. The following code works as intended but shows no results when the page is first loaded. When I hit space or write anything, it brings up the results. Normally angular brings all the results when the input is empty. I want all the results to be loaded when the page is first loaded.
Here is the html:
<body ng-app>
Search: <input ng-model="query">
<ul ng-controller="Reddit">
<li ng-repeat="title in reddit | filter:{data.title:query} ">
<p>{{title.data.title}}</p>
</li>
</ul>
</body>
And the script:
function Reddit($scope, $http) {
$http.get('http://www.reddit.com/r/programming/.json').success(function(topic){
$scope.reddit = topic.data.children;
});
}
Also you can play with it on jsfiddle: http://jsfiddle.net/liquidcat/sZCE4/
You forgot to initialize query.
add
$scope.query = '';
in your controller.
EDIT : above statement is wrong. Sorry.
In addition to the above, your query variable is out of the scope.
(so just defining query in the controller's scope would disconnect the object...)
Here is the cleanuped / working code example.
http://plnkr.co/edit/0aT33Q2H2SQTPG4E62Zb?p=preview