Hi I'm new to this framework and I have to change some webapp.
There is already something like this:
<input type="text" class="catalog-search input input--large input--full" ng-model="search">
and
<ul class="catalog-list catalog-scroll">
<li ng-repeat="rodzic in list | groupBy:'styl' | toArray:true | orderBy:!'$key'">
{{rodzic.$key}}
<ul>
<li ng-repeat="dziecko in rodzic | filter:search | bookmark:search" ng-class="{active:isActiveTab(dziecko)}" ng-click="openItem(dziecko)">
{{dziecko.rodzina}}
<b>{{dziecko.page}}</b>
</li>
</ul>
</li>
</ul>
The above code create table of contents for pdf file.When I type some word in input field searching works fine but I can't search by number,let's say I want to find page number 3.
What should I change to be able to find by page number?
Thx in advance.
I see no such problem of searching by numbers. I put a simplified version of your code into Plnkr and I can search by words or numbers - even if the numbers are sometimes numeric values and sometimes strings.
Search on 6 or 7 (which are numeric values) or 3 (which is a string '333'). Both work.
Can you modify my Plunk to show the problem?
Here's my HTML:
<body ng-controller="MainCtrl">
<input type="text" class="catalog-search input input--large input--full" ng-model="search">
<ul class="catalog-list catalog-scroll">
<li ng-repeat="rodzic in list">
{{rodzic.$key}}
<ul>
<li ng-repeat="dziecko in rodzic | filter:search" ng-class="{active:isActiveTab(dziecko)}" ng-click="openItem(dziecko)">
{{dziecko.rodzina}}
<b>{{dziecko.page}}</b>
</li>
</ul>
</li>
</ul>
</body>
Here's my controller with some mock data which I think simulates yours well enough for this demonstration.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.list = [
[{
rodzina: 'This is one',
page: '111'
}, {
rodzina: 'This is two',
page: '222'
}, {
rodzina: 'This is three',
page: '333'
}],
[{
rodzina: 'This is four',
page: '444'
}, {
rodzina: 'This is five',
page: '555'
}, {
rodzina: 'This is six',
page: 666
}],
[{
rodzina: 'This is seven',
page: 777
}, {
rodzina: 'This is eight',
page: '888'
}, {
rodzina: 'This is nine',
page: '999'
}],
]
});
Related
So i have an array of random names and i want each name in the array to have its own hyperlink. When displayed it should basically be a list of names that each link to different pages, how do i go about giving each name in the array a different hyperlink? I attached a snippet of the html and js.
$scope.artists=[
{
name: "Noelle",
rank: "Gold",
worth: 752000,
},
{
name: "John",
rank: "Silver",
worth: 700000,
},
{
name: "Shem",
rank: "Green",
worth: 5687952,
},
<ul>
<li ng-repeat="artist in artists | orderBy: order | filter: search">
<h3>{{artist.name}} - {{artist.worth | currency:'£'}}</h3>
<div class="remove" ng-click="removeArtist(artist)">x</div>
<span class="rank" style="background:{{artist.rank}}">{{artist.rank}}</span>
</li>
</ul>
You would include the href as part of the artist object - and have a standard URL that differs only in the name of the artist.
In the following I am interpolating the artist into the href of the a. Note that I am coding this as a link property with the artists full name in case there are two artists with the same first name.
Note that hovering over the link text will show you the link href - if you click it - nothing will show since there isnt a corresponding page to navigate to.
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.artists=[
{
name: "Noelle",
rank: "Gold",
worth: 752000,
link: "noelle-smith"
},
{
name: "John",
rank: "Silver",
worth: 700000,
link: "john-jones"
},
{
name: "Shem",
rank: "Green",
worth: 5687952,
link: "shem-willis"
}]
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<ul>
<li ng-repeat="artist in artists | orderBy: order | filter: search">
<h3>{{artist.name}} - {{artist.worth | currency:'£'}}</h3>
<span class="rank" style="background:{{artist.rank}}">{{artist.rank}}</span><br/>
View Artist
</li>
</ul>
</div>
I am pretty new with AngularJS just learning it now. Just a beginner question. I have a bunch of data on a json file. And I need to setup a sidebar with list of person's name that are clickable and once they're clicked the main content w/c is also looped using ng-repeat with limitTo:1 filter need to be update on the right person name data.
Here was my sample code:
html:
JS:
Hope anyone can help! Any help will deeply appreciated.
Try this code, almost the same scenario covered here: OR see working example here http://jsfiddle.net/pkxPa/91/
function Test($scope) {
$scope.persons = [{ type: 1, name: 'Caio' }, { type: 2, name: 'Ary' }, { type: 1, name: 'Camila' }, { type: 3, name: 'Daniel' }];
$scope.myFunction = function (val) {
return (val.type != 2);
};
}
<div ng-app ng-controller="Test">
<span ng-click="myFilter = {type: 1}">Type 1</span> |
<span ng-click="myFilter = {type: 2}">Type 2</span> |
<span ng-click="myFilter = {type: 3}">Type 3</span> |
<!-- multiple filter - not working -->
<span ng-click="myFilter = myFunction">Types 1 & 3</span> |
<span ng-click="myFilter = null">No filter</span>
<ul>
<li ng-repeat="person in persons | filter:myFilter">{{person.name}}</li>
</ul>
</div>
I want to select an array in array by property of the parent. I don't know the index (in this case 1), but I know the id. Can I do it? This is my working example with index, I want same results by id (43).
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div data-ng-app="myApp" data-ng-controller="myCtrl">
<ul>
<li ng-repeat="p in people[1].rooms" ng-bind="p"></li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.people = [
{
id: 25,
nick: 'Joker',
rooms: ['room1', 'room2']
},
{
id: 43,
nick: 'King',
rooms: ['room3', 'room4']
},
{
id: 78,
nick: 'Queen',
rooms: ['room5', 'room6']
}
]
});
</script>
You should separate get rooms for particular user by its id using strict filter on people array. Its obvious that you are going to a single record as its id based search.
Code
<ul>
<li ng-repeat="p in filteredPeople = (people | filter: {id: l.id })[0].rooms">
{{p}}
</li>
</ul>
This is one option:
<ul ng-repeat="p in people | filter: { id: 45 }">
<li ng-repeat="room in p.rooms" ng-bind="room"></li>
</ul>
I have this data structure, search:
{
id: '1',
name: 'Foo'
service_ids:
[
3,
8,
12
]
}
I then have another data structure, services, that matches the ids from service_ids above with the below:
[
{
id: 3,
name: 'Fighter'
},
{
id: 4,
name: 'Typhoon'
},
{
id: 8,
name: 'Kung'
},
{
id: 12,
name: 'Builder'
}
]
I want to display this in a form using AngularJS. The name is fine. I want to display all possible services as checkboxes and if the search has one of the services checked then it is ticked in the checkbox. Something like:
<li ng-repeat="search in searches">
<input ng-model="search.name">
<ul>
<li ng-repeat="service in services">
<input type="checkbox">
{{service.name}}
</li>
</ul>
</li>
I don't know how to link that checkbox to the service_ids and the services. Any help appreciated.
I am using $resource.
Update
Ignore my answer, misread you nesting request.
If anyone needs nesting guidance see below:
The best way to nest in angular that I have found is to create a template which is aware of child items like this:
<script type="text/ng-template" id="tree_item_renderer.html">
<span>{{tag.Name}}</span>
<ul ng-show="tag.Children.length > 0">
<li ng-repeat="tag in tag.Children" ng-include="'tree_item_renderer.html'" ></li>
</ul>
</script>
<ul class="tag-list">
<li ng-repeat="tag in tags" ng-include="'tree_item_renderer.html'" ></li>
</ul>
If I understand your question it should be as easy as:
<input type="checkbox" ng-model="search.service_ids[service.id]">
And you should also get bi-directional binding.
Updated
Just realized search.service_ids is an array not a map. So the solution above is not accurate.
You might want instead to use a filter:
<input type="checkbox" ng-checked="search.service_ids | contains:service.id">
Then
filter('contains', function() {
return function(haystack, needle) {
return haystack.indexOf(needle) >= 0;
}
});
I'd like to make a simple "autocomplete". Enter keyword into input and select the result. Then the selected items will be shown. I'm currently stucking in how to change the hidden select and show selected items. Could you help me?
<div ng-controller="MyCtrl">
<input type="search" ng-model="query">
<ul ng-repeat="game in games | filter:query" ng-show="query.length >= 2 && (games | filter:query).length">
<li><a ng-click="selectGame(game.id)">{{ game.name }}</a></li>
</ul>
<select multiple name="games" style="display:none;" ng-options="game.id as game.name for game in games"></select>
<ul class="selected-games">
<li>{{ game.name }} - {{ game.year }}</li>
</ul>
</div>
<script type="text/javascript">
function MyCtrl($scope, $http) {
$http.get('/ajax/all/games/').success(function(data){
$scope.games = data;
});
$scope.selectGame = function() {}; //?
}
//MyCtrl.$inject = ['$scope', '$http'];
// JSON data from URL
var games = [
{'id': 1, 'name': 'Halo', 'year': '2005'},
{'id': 2, 'name': 'Final Fantasy', 'year': '2008'},
{'id': 3, 'name': 'Guitar Heroes', 'year': '2008'},
{'id': 4, 'name': 'Warcraft', 'year': '2003'},
{'id': 5, 'name': 'Starcraft II', 'year': '2010'},
{'id': 6, 'name': 'Fifa 12', 'year': '2012'},
];
</script>
Its hard to understand what your desired result is, but check out my updates here: http://jsfiddle.net/rS6Hz/1/. I added a new variable to the scope, an array called selectedGames and implemented the ng-click by adding to that array.
$scope.selectedGames = [];
$scope.selectGame = function(game) {
$scope.selectedGames.push(game);
};
Then, in the display, you have to add an ng-model to the select for it to do anything (as far as I can tell) and the ul of selected-games needs an ng-repeater to loop over the selectedGames
<select multiple name="games" ng-model="something" ng-options="game.id as game.name for game in selectedGames"></select>
<h1>Selected Games</h1>
<ul class="selected-games">
<li ng-repeat="game in selectedGames">{{ game.name }} - {{ game.year }}</li>
</ul>
(I removed the display: none; on the select in order to see it.
Here is another way, without using a separate variable:
http://jsfiddle.net/9Ag9r/
Basically:
<ul class="selected-games">
<li ng-repeat='game in games | filter:{selected:true}'>{{ game.name }} - {{ game.year }}</li>
</ul>
I believe it is a cleaner solution than the accepted one