Hi i need to paste letters between names in sorted objects array
$scope.names = [
{name: Anna}
{name: Angelina}
{name: Ivan}
{name: Michael}
{name: Marina}
]
<div ng-repeat="user in names">
<div>{{user.name}}</div>
</div>
And result should be:
A
Anna
Angelina
I
Ivan
M
Michael
Marina
I have no idea how to insert breaking First letter
You can use a Custom Filter like below,
$scope.myCustomFilterA = function(player) {
return player.name.substring(0,1).match(/A/gi) && $scope.otherCondition;
}
DEMO
Related
I want to know how to get value in array in *ngFor. First I use *ngFof to get item list. Second I use commonService.indexKey$.getValue() to check id in commonService.quantityList$.getValue() available or not
This is my code
HTML
<div *ngFor="let item of commonService.quantityList$.getValue(); let i = index" class="Box">
<label>Qty : {{commonService.indexKey$.getValue()== item.id?item.quantity - commonService.indexKey$.getValue().count:item.quantity}}</label>
</div>
Example data
commonService.quantityList$.getValue()
quantity = [
{ id:1, quantity:100 },
{ id:2, quantity:200 },
{ id:3, quantity:30 }
];
commonService.indexKey$.getValue()
indexCount = [
{id: 1,count: 2},
{id: 2,count: 3},
{id: 3,count: 4},
]
Not sure what are you trying to do in your label really because seems you are making a comparison “==“ so the label will output “true” or “false”. Is that what you really want?
<div *ngFor="let item of commonService.quantityList$.getValue(); let i = index" class="Box">
<label>Qty : {{commonService.indexKey$.getValue()[i]== item.id?item.quantity - commonService.indexKey$.getValue()[i].count :item.quantity}}</label>
</div>
I have this array of objects. that holds somethings like this.
[
{
id: 1,
name: "Extra Cheese"
},
{
id: 2,
name: "No Cheese"
}
]
im iterating thru the array here
<select ng-model="item.modifiers" multiple chosen class="chosen-select" tabindex="4" ng-options="modifier._id as modifier.name for modifier in modifiers"></select>
The thing item.modifiers model that has an array of this 2 id
[
1,2
]
I want the multi select to auto selected the two ids that are in the item.model
I want the final result to look something like this
Your code is pretty much working already, maybe some of the variables are not assigned correctly (eg. id instead of _id)
angular.module('test', []).controller('Test', Test);
function Test($scope) {
$scope.modifiers = [
{
id: 1,
name: "Extra Cheese"
},
{
id: 2,
name: "No Cheese"
}
]
$scope.item = {};
// add this for pre-selecting both options
$scope.item.modifiers = [1,2];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
<select ng-model="item.modifiers" multiple chosen class="chosen-select" tabindex="4" ng-options="modifier.id as modifier.name for modifier in modifiers"></select>
</div>
If I understand the question correctly, you're wanting to pre-select the two options.
To do this you will need to set your ng-model to point to the actual objects you are iterating over.
You will also need to change your ng-options to ng-options="modifier as modifier.name for modifier in modifiers" rather than just iterating over the ids.
Here's the relevant documentation under Complex Models (objects or collections)
https://docs.angularjs.org/api/ng/directive/ngOptions
Something like this should work:
HTML:
<select ng-model="$ctrl.item.modifiers"
ng-options="modifier as modifier.name for modifier in $ctrl.modifiers"
multiple chosen class="chosen-select" tabindex="4" >
</select>
JS:
app.controller("my-controller", function() {
var $ctrl = this;
$ctrl.modifiers = [{
id: 1,
name: "Extra Cheese"
}, {
id: 2,
name: "No Cheese"
}];
$ctrl.item = {
modifiers: []
}
$ctrl.$onInit = function() {
const id1 = 1;
const id2 = 2;
for (const modifier of $ctrl.modifiers) {
if (modifier.id === id1 || modifier.id === id2) {
$ctrl.item.modifiers.push(modifier);
}
}
}
}
Here's a pen showing the result:
http://codepen.io/Lahikainen/pen/WooaEx
I hope this helps...
I have an application where I want to filter a long list of products based on value from "select" containing product types. The filter works, but only after I select something. It initially sets the "Show All" option, but filters out everything. If I select something else, it works, and if I re-select "Show All" it works. But why doesn't the filter work initially?
The model (looks something like this):
$scope.products = {[
{name: 'productA',Type: 1},
{name: 'productB',Type: 1},
{name: 'productC',Type: 2},
{name: 'productD',Type: 2},
]};
$scope.productTypes = {[
{Name: 'typeAlpha',Type: 1},
{Name: 'typeBravo',Type: 2},
]};
The HTML:
<select id="productFilter" data-ng-model="productFilter">
<option value="" selected="selected">Show all</option>
<option data-ng-repeat="type in productTypes" value="{{type.Type}}">{{type.Name}}</option>
</select>
<p data-ng-repeat="product in products | filter:{Type:productFilter} ">{{product.Name}}</p>
I recommend using ng-options instead of ng-repeat over the options:
<select id="productFilter" ng-model="productFilter"
data-ng-options="type.type as type.name for type in productTypes">
<option value selected="selected">Show all</option>
</select>
<p data-ng-repeat="product in products | filter:(!!productFilter || undefined) && {type: productFilter}">
{{product.name}}
</p>
For "show all", the filter must return undefined (ng-repeat filter "show all" items if no filter selected)
Also removed the {..} around the array and better use lower case for properties:
$scope.products = [
{name: 'productA', type: 1},
{name: 'productB', type: 1},
{name: 'productC', type: 2},
{name: 'productD', type: 2}
];
$scope.productTypes = [
{name: 'typeAlpha', type: 1},
{name: 'typeBravo', type: 2}
];
Here is a jsbin (based on Hiskinds)
http://jsbin.com/yepaqikodo/1/edit?html,js,output
This is a working example based on code above: http://jsbin.com/buzafisuko/edit?html,js,output
The Slava.N's comment is correct and you should not wrap productTypes and product in {}
Also, JavaScript is a case-sensitive language, product.Name is always undefined, you should use product.name in your HTML instead.
Use product.Type instead ofType inside 2nd ng-repeat filter
you set $scope.productFilter = ''.
so its return by default value blank at filter.
can someone help me this?
I want to get the person id from the project, and bind it to a link to view more details of the person, but it doesn't look like a multidimensional array to me, any idea?
Angular js:
var projects = [
{
id: 1, projectName: 'Economy', year: '2015', projectdescription: 'A cool economy project',
persons: [
{ person: '1', personId:'1', firstname:'John', lastname:'Snow', description: 'John is an economist', expertise: 'Math' }
]
}
Html:
View More
Thanks in advance.
You really need to learn about basic JavaScript stuff:
[a, b, c] (note the square brackets) is an array. You access to the element at index i, starting at 0, using array[i]
{name: 'Joe', age: 23} (note the curly brackets) is an object. You access to a property of this object using object.name or object['name'].
So what you have there is an array of projects. Each project is an object with a persons property, holding an array or persons. Each person is an object with a personId property.
So, to access the id of the first person of the first project, you would use
projects[0].persons[0].personId
To access the ID of the second person of the third project, you would use
projects[2].persons[1].personId
<div ng-repeat='pr in projects'>
<div ng-repeat='p in pr.persons'>
{{p.person}}
<a href='#/ur/detail({pId:p.person})'>More detail</a>
</div>
</div>
Angular js:
`var projects = [
{
id: 1, projectName: 'Economy', year: '2015', projectdescription: 'A cool economy project',
persons: [
{ person: '1', personId:'1', firstname:'John', lastname:'Snow', description: 'John is an economist', expertise: 'Math' }
]
}`
html:
`View More`
I have the user object defined as below.
$scope.user = [{id: 1, friends:
[
{name: 'John', age: 21, sex: 'M'},
{name: 'Brad', age: 32, sex: 'M'}
]
}]
I have the following code:
<input type="text" ng-model="searchText">
<div ng-repeat="friend in user.friends | filter:searchText">
{{friend.name}} {{friend.age}}
</div>
Here whenever I search, I get results for name, age as well as sex. But I want to search only for name and age and I don't want sex to be searchable. Can anyone help me with how I can achieve this?
You can pass an object as the second parameter to achieve this if you can have two search fields
<div ng-repeat="friend in user.friends | filter:{name:searchNameText, age:searchAgeText}">
Otherwise you'll need to write a custom filter to use the same field for both, or pass a custom filter function as the third parameter which is described in the docs.
http://docs.angularjs.org/api/ng.filter:filter
I'm not sure if this is what you are after. If you want to have one input field to matched multiple properties you need a filter function to be passed to filter.
$scope.user = {id: 1, friends: [{name: 'John', age: 21, sex: 'M'}, {name: 'Brad', age: 32, sex: 'M'}, {name: 'May', age: 64, sex: 'F'}]};
$scope.searchFilter = function (obj) {
var re = new RegExp($scope.searchText, 'i');
return !$scope.searchText || re.test(obj.name) || re.test(obj.age.toString());
};
Here's a fiddle example
http://jsfiddle.net/fredrik/26fZb/1/
This is not the cleanest way to accomplish what you want, but it is the simplest way to accomplish an OR filter using the standard ng-repeat filter.
Controller:
$scope.user = [{id: 1, friends:
[
{name: 'John', age: 21, sex: 'M'},
{name: 'Brad', age: 32, sex: 'M'}
]
}]
$scope.buildSearchData = buildSearchData;
function buildSearchData(friend){
return friend.name + ' ' + friend.age;
}
HTML
<input type="text" ng-model="searchText">
<div ng-repeat="friend in user.friends | filter:{searchData:searchText}"
ng-init="friend.searchData = buildSearchData(friend)">
{{friend.name}} {{friend.age}}
</div>
"friend in user.friends | json | filter:{something:somethingtext}"
http://docs-angularjs-org-dev.appspot.com/api/ng.filter:json
Another possible approach is to create an aggregate field that contains the values of all of the fields you want to filter on concatenated and only filter on that.