I have this object:
phraseFormId = [
{
id: 1,
name: 'Word'
}, {
id: 2,
name: 'Sentence'
}
];
What I would like to do is to change this read only row.formId to be a SELECT element where it will display and where I can choose new values:
<div>
<div>{{ row.formId}}</div>
</div>
Can anyone give me some ideas how I can do this?
Thanks
Certainly not sure, what exactly you are looking for but have a look on this fiddle, simple enough to start with. Let me know, if your problem statement is different.
Using
ng-repeat
Fiddle: http://jsfiddle.net/U3pVM/26336/
It is a little unclear exactly what you are asking for, but I think I may have found a solution.
Here is a DEMO
Let me know if this is what you were looking for!
It utilizes ng-options with select to create a dropdown with values that will bind to a model property
Html
<div ng-repeat="item in phraseFormId">
<h4 ng-bind="'Item ' + $index"></h4>
id: {{item.id}}<br>
name: {{item.name}}<br>
formId:
<select ng-model="item.formId" ng-options="id for id in formIds"></select>
</div>
Controller
$scope.formIds = [1,2,3];
$scope.phraseFormId = [
{
id: 1,
formId: 1,
name: 'Word'
}, {
id: 2,
formId: 2,
name: 'Sentence'
},
{
id: 3,
formId: 1,
name: 'Paragraph'
}, {
id: 4,
formId: 3,
name: 'Sentence'
}
];
Related
i did a request to the API, then the response is as the following:
data1 = [{id: 1, code:1, title:title1}, {id:2, code:3, title:title2}, ...]
Now i would like to extract an array of the titles of the above response as below:
titles = [title1, title2, ....]
how can i do it by map?
And the second question:
Consider if the response would be as follow:
data2 = [{id: 1, code:1, title:title1, chapters:[{id:1, chapter: chapter1},{id:2, chapter: chapter2}, ...]}, {id:4, code:5, title:title3, chapters:[{id:4, chapter: chapter3}, ...]}, ...]
In this case how can i extract an array of the chapters as following:
chapters = [chapter1, chapter2, chapter3]
I tried to do them as below:
for the first question:
title = data1.map((item) => {item.title})
for the second one i did:
chapters = data2.chapters.map((item) => {item.chapter})
But it doesn't work. I think some where there are error in syntaxes.
Can any one help me how to manage these data?
Thank you.
Yep, you are wrong with syntax.
Firs case - title = data1.map((item) => {item.title})
You've wrapped item.title with {}, so you should add return. Or omit {}.
For example: title = data1.map(item => item.title)
Second case - same issue with {}, but you should also use flatMap because you need flat list in result. If you write with regular map - you won't get desired ["chapter1", "chapter2"].
See also detailed example below.
const data1 = [
{ id: 1, code: 1, title: "title1" },
{ id: 2, code: 3, title: "title2" }
];
const data1_mapped = data1.map(d => d.title);
console.log(data1_mapped);
const data2 = [
{
id: 1,
code: 1,
title: "title1",
chapters: [{ id: 1, chapter: "chapter1" }, { id: 2, chapter: "chapter2" }]
},
{
id: 2,
code: 2,
title: "title2",
chapters: [{ id: 1, chapter: "chapter22" }, { id: 2, chapter: "chapter32" }]
}
];
const data2_mapped = data2.flatMap(d => d.chapters.map(c => c.chapter));
console.log(data2_mapped);
You are not returning a value. Try removing braces like so...
title = data1.map((item) => item.title)
chapters = data2.chapters.map((item) => item.chapter)
See this for more info on the issue:
Meaning of curly braces in array.map()
I have an array multidimensional with multiples results:
books: any[] = [
{
name: "The Name book",
chapter: [{
name: 'Alpha',
pages: '180'
}, {
name: 'Beta',
pages: '100'
}]
},
{
name: "Jungle Book",
chapter: [{
name: 'Whole book',
pages: '300'
}]
}
]
I would like to understand how to create a *ngIf when a book has just one chapter like "Jungle book" or multiples as "The Name Book."
Thanks for your help
I am not sure I have fully understood the selection creteria.
Anyway, assuming the template where you want to add the *ngIf check is defined in the same Component where you define the books property, I would try something like this
In the template
<div *ngFor="let book of books">
<div *ngIf="isBookToShow(book)">
<!-- here goes the rest of your html -->
</div>
</div>
with the corresponding method isBookToShow(book) in the class
isBookToShow(book) {
return book.chapter.length > 0
}
i have 2 select boxes,which is getting the data using ng-options and hardcoded.
the second select box should show the data based on the selected data in first selectbox. this is the plunker.
https://plnkr.co/edit/r1S1e61H3RfH3uYGYTBP?p=preview
can anyone please help me.
$scope.data = [{
cities: [{
id: 1,
title: 'Mysore'
}, {
id: 2,
title: 'Bangalore'
}, {
id: 3,
title: 'Delhi'
}, {
id: 4,
title: 'Mumbai'
}],
maps: [{
id: 1,
title: 'Zoo',
city_id: 1
}, {
id: 2,
title: 'Palace',
city_id: 1
}, {
id: 3,
title: 'Beach',
city_id: 4
}]
}];
You can pass the selected city's id from 1st drop down as a filter to 2nd drop down like below
<select name="mapSelect" required="true" ng-options="map as map.title for map in data[0].maps | filter:{'city_id':citySelect.selectedOption.id}" ng-model="mapSelect.selectedOption"></select>
I have $scope.selectedUsers set as an array with just 1 object, which is an exact match of one of the objects from my available list of all $scope.users, altho the selected user is not highlighted in my <select multiple...>. Shouldn't it be highlighted?
Js:
$scope.selectedUsers = [
{ id: 2, name: "Jenny" }
];
$scope.users = [
{ id: 1, name: "Frank" },
{ id: 2, name: "Jenny" }
];
Html:
<select multiple ng-model="selectedUsers" ng-options="user as user.name for user in users"></select>
Live demo: http://plnkr.co/edit/wpfvhvuShFVE07cyBE6M?p=preview
which is an exact match of one of the objects from my available list of all $scope.users
No, they are not the same even though both objects has similar key-values. Angular uses strict comparison of objects (===) and two objects are equal only if they are the same object (references the same object).
Correct code in your case:
$scope.users = [
{ id: 1, name: "Frank" },
{ id: 2, name: "Jenny" }
];
$scope.selectedUsers = [
$scope.users[1]
];
Demo: http://plnkr.co/edit/Czb7JuUzl7dPa08gsqUD?p=preview
I am trying to show a select box inside a ng-repeat and am stuck with the following:
<tr ng-repeat="element in elements" post-repeat-directive>
<td>{{element.name}}</td>
<td>
<select ng-model="element.type"
ng-options="item.id as item.name for item in tipo_items"></select>
</select>
</td>
</tr>
In my controller I have:
$scope.tipo_items = [
{ id: 1, name: 'uno' },
{ id: 2, name: 'dos' },
{ id: 3, name: 'tres' },
{ id: 4, name: 'cuatro' },
{ id: 5, name: 'cinco' },
];
This shows the select items, but no item is pre-selected!
I checked the element.type values and they are correct...
What am I doing wrong?
According to the comprehension expression you defined in the select, you need to use the id value to preselect the item and set it for the model object.
$scope.element = {};
$scope.element.type = $scope.tipo_items[0].id;
DEMO
OK I found the problem...
I was loading the id from the database as json, and the id was a string, not an integer...
this solved the problem:
$scope.tipo_items = [
{ id: '1', name: 'uno' },
...
instead of
$scope.tipo_items = [
{ id: 1, name: 'uno' },
...
This is default behavior by angular select directive. If you'll set ng-model to a default in the ctrl you'll get it preselected.
something like (in the ctrl):
$scope.element.name = $scope.tipo_items[0]