I'm trying to repeat 4 elements in a 2x2 matrix format with top and bottom separate rows. For that I'm using ng-repeat to repeat the top and bottom rows and then another ng-repeat inside to repeat the two elements. I have done it and got the required format. But my problem is that I need to provide different titles for these 4 elements(div). How can I give the titles in an array so that it will be repeated in both rows? Below is my code:
<div class="massage-type-section" ng-controller="massageController">
<div class="select-massage-type" ng-repeat="item in massage">
<div class="massage-choice" ng-repeat="type in massageType">
<div class="massage-choice-icon">
<img src="images/single-icon-deselect.png">
<img src="images/single-icon.png">
</div>
<p class="massage-title">{{type.title}}</p>
<p class="section-details">One massage practitioner comes to massage one person.</p>
<div class="type-selected"><img src="images/selected.png"></div>
</div>
</div>
</div>
function massageController($scope) {
$scope.massage = [{}, {}];
$scope.massageType = [
{ title: 'Single' },
{ title: 'Couple' }
];
};
If your primary requirement in the inner array is only to display the massage Type titles, your array looks good. Please mark as answer if this helps.
if your requirement is to give different titles in different levels use $index or $parent.$index in appropriate way.
To find the index of an item in the collection use $index property
To get the index of the parent element
Use $parent.$index or
Use ng-init="parentIndex = $index"
Related
I created two tables in server side. The first one contains informations like house, room house, number, street ...
The second one contains informations like first_color, room house, second_color ...
Of course both tables have different number of columns and rows. For instance the first one has 5 rows and the second one only 2 rows (rows increase dynamically).
As you read before they both have one common information the "room house" data.
I need to change colors information of the first table with information of the second one depending on that link field 'room house'.
Here bellow is my HTML code using two times "ng-repeat" :
<div class="col-sm-6 col-md-4" ng-repeat="item in data.house | orderBy: '-count' | limitTo: data.limit">
<div ng-repeat="d in data.colors" ng-show="d.room_house == item.room_house">
<span style="color:{{::d.firsrt_color}}">{{::item.name}}</span>
</div>
<div>
<span style="color:#444444">{{::item.name}}</span>
</div>
</div>
However if the common information can't be find it doesn't display the rest of the table. I need to display the whole information within the first table with the color information inside the second one. If information can't be found (due to different numbers of rows between the two arrays or because data doesn't exist in the second one) I must continue to display information of the first array however with a default color.
Of course adding an html div with ng-show="d.room_house != item.room_house" doesn't work because it will display some information in two colors.
Controller 1
Controller 2
Hope someone will be able to help me.
Thank you
Instead of nested loops in HTML, you can move the logic to your controller and your HTML looks smaller and cleaner and the original issue will also be fixed.
Try this solution,
var defaultColor = "#444444";
data.house.forEach(function(house) {
house.color = defaultColor; // assign default color initially
var obj = data.colors.filter(function(x){
return x.room_house == house.room_house;
}
if(obj.length > 0) {
house.color = obj[0].firsrt_color;
}
});
<div class="col-sm-6 col-md-4" ng-repeat="item in data.house | orderBy: '-count' | limitTo: data.limit">
<div>
<span ng-style="{ color: item.color}">{{::item.name}}</span>
</div>
</div>
P.S: You've used "firsrt_color" instead of "first_color", I hope that's intended..
I am playing around with a card game app, and I want a card image to show for each instance that is in the hand array. To keep it simple, I am looking to show card1.png if the array looks like [1,2,3,4,5]. However, I want the image to show twice if the array looks like [1,1,3,4,5]. So far, I can just get it to show once.
Index.html
<div ng-repeat="hand in hands track by $index">
Player {{$index}} hand: {{ hand }}
<img src="/images/faces-one.png" ng-show="numberInArray(hand, 1)">
<img src="/images/two.png" ng-show="numberInArray(hand, 2)">
<img src="/images/three.png" ng-show="numberInArray(hand, 3)">
<img src="/images/four.png" ng-show="numberInArray(hand, 4)">
<img src="/images/five.png" ng-show="numberInArray(hand, 5)">
<img src="/images/six.png" ng-show="numberInArray(hand, 6)">
</div>
App.js
$scope.numberInArray = function(hand, num) {
var found;
found = hand.includes(num) ? true : false;
return found;
}
I'm not suggesting that this is the best solution, but to fix what you've currently got (or at least appear to have)...
Use another (nested) ng-repeat on each image instead of ng-show. You should be able to attach it to a getNunbersInArray(n) function that returns a subset of the main array that can then be looped through the desired number of times.
For example, if you have [1,1,3,4,5] in your main array, the function connected to the new ng-repeats would return [1,1] (when passed 1) and [2] (when passed 2), etc.
You don't need to do anything with the values returned in these new arrays, the only thing that matters is that they contain the correct number of elements to ensure that the image is repeated the correct number of times.
Following the comments I received, this is the solution I implemented:
Index.html
<div ng-repeat="hand in hands track by $index">
Player {{$index}} hand:
<div ng-repeat="card in hand track by $index">
<img ng-src="/images/{{card}}.png">
</div>
</div>
The numberInArray function was removed as it was not required. Basically, This now iterates over the array of arrays, and displays the image found at the ng-src, which in this case would be 1.png, 2.png etc. This achieves my goal of showing the card image for each number in the array, regardless of its count.
I am trying to compare the previous element in a ng-repeat that is ordered to the current one. If the two appointments have the same DateString I don't want it to print out. You can see I try to prevent that in the ng-if.
<div ng-repeat="appointment in appointments | orderBy: 'milliSeconds' " ng-if="!noAppointments">
<div class="row row-date" ng-if="appointments[$index - 1].DateString != appointment.DateString">
<div class="col">
{{appointment.DateString}}
</div>
</div>
</div>
This does not work though. Do you guys have any suggestions on how this could be done?
I sorted the array in the controller and moved the logic there too to solve this.
I showed a JSON data using ng-repeat in rows with 2 columns. I also have a search box to filter desired data. my code is as below:
<input type="text" ng-model="search" />
<div class="row" ng-repeat="x in books | filter:search" ng-if="$index%2==0">
<div class="col" >
{{x.name}} , {{x.type}}
</div>
<div class="col" >
{{books [$index+1].name}} , {{books [$index+1].type}} ` `
</div>
</div>
but when I use the search box, the results wont show correctly.
Sometimes it shows both desired data and its next index , sometimes it shows the desired data in both columns of a row and sometimes it shows nothing at all.
How should I make it correct ?
Thanks in advance.
$index refers to the index in the filter results, but you're using it to access the original array in the second inner div. So if you have books A B C in your list, and if you search for A, then the filter results will have one item but the original books array still has all three, and B will still appear because books[1] is B.
Instead of using rows and cols, could you place the ng-repeat on the inner div and wrap them inside a single container that gives you the width you want? If the inner divs use float: left or display: inline-block, you'd get a two-column list if the container is the right width.
<div class="books-container">
<div class="book" ng-repeat="x in books | filter:search">
{{x.name}} , {{x.type}}
</div>
</div>
Working example: https://plnkr.co/edit/MG4do0kqV8wk0nk9tlKJ?p=preview
I am new to angularjs, I am facing some issues on getting and displaying one specific value from json file to show on my view page using angularjs ng-repeat for image source. Based on this key/value only I need to repeat the json file and need to get and display the specific value on my html page.
JSON:
[
{"name":"imageurl","value":"/images/Image1.nii"},
{"name":"3d","value":"3d0"},
{"name":"sliceX","value":"sliceX0"},
{"name":"sliceY","value":"sliceY0"},
{"name":"sliceZ","value":"sliceZ0"},
{"name":"imageurl","value":"/images/Image2.nii"},
{"name":"3d","value":"3d1"},
{"name":"sliceX","value":"sliceX1"},
{"name":"sliceY","value":"sliceY1"},
{"name":"sliceZ","value":"sliceZ1"}
]
Here i need to repeat through key: imageurl and to display it's value on my html page. For first iteration, it should get first imageurl(like: /images/Image1.nii), and for second iteration, it should get second imageurl(like: /images/Image2.nii) value, and so on... I've created a fiddle at: FIDDLE . Please check once. So my desired output could be:
On first iteration:
<div ng-repeat="item in newArr>
<div data-imgsrc="/images/Image1.nii">
<div id="3d0"></div>
<div id="sliceX0"></div>
<div id="sliceY0"></div>
<div id="sliceZ0"></div>
</div>
</div>
on second iteration:
<div ng-repeat="item in newArr>
<div data-imgsrc="/images/Image2.nii">
<div id="3d1"></div>
<div id="sliceX1"></div>
<div id="sliceY1"></div>
<div id="sliceZ1"></div>
</div>
</div>
Please help me regarding this. Thanks in advance.
You need to change data structure, right now it makes little sense for the your task. Nesting 3D, X, Y and Z objects inside each imageurl objects would makes everything very simple:
[
{"name":"imageurl","value":"/images/Image1.nii", parts: [
{"name":"3d","value":"3d0"},
{"name":"sliceX","value":"sliceX0"},
{"name":"sliceY","value":"sliceY0"},
{"name":"sliceZ","value":"sliceZ0"},
]},
{"name":"imageurl","value":"/images/Image2.nii", parts: [
{"name":"3d","value":"3d1"},
{"name":"sliceX","value":"sliceX1"},
{"name":"sliceY","value":"sliceY1"},
{"name":"sliceZ","value":"sliceZ1"}
]}
]
and then you would render it like this:
<div ng-repeat="item in newArr>
<div data-imgsrc="{{item.value}}">
<div ng-repeat="part in item.parts" id="{{part.value}}"></div>
</div>
</div>