I'm currently building a widget for a site that's effectively a "deal builder". In the builder widget will be a "add new item" button which will add a new device item to the <li> list.
<ul class="deal-builder-devices entity">
<li ng-repeat="device in devices">
<div class="db-handset-image">
<span class="phone-silhouette" ng-hide="hideSilhouette"></span>
<img ng-repeat="image in modelImages" src="[[image]]" ng-hide="!hideSilhouette" />
</span>
</div>
<div class="db-device">
<ul class="opts">
<li>
<select ng-model="selectedManufacturer" ng-change="getManufacturerModels(selectedManufacturer)">
<option value="">Manufacturer</option>
<option ng-repeat="manufacturer in manufacturers" value="[[manufacturer.id]]">[[manufacturer.name]]</option>
</select>
</li>
<li>
<select ng-disabled="!models > 0" ng-model="selectedModel" ng-change="loadModelImage(selectedModel)">
<option value="">Model</option>
<option ng-repeat="model in models" value="[[model.id]]">[[model.model]]</option>
</select>
</li>
</ul>
</div>
</li>
</ul>
<div class="deal-builder-controls entity">
<button class="db-add-handset" ng-click="addDevice()"><i class="fa fa-plus-circle"></i> Add another handset</button>
<button class="db-find-deals">Find deals</button>
</div>
The issue that I'm having is that it gives the select options the exact same model, so if I change the select option in one dropdown, it will change all newly generated dropdowns too. How do I fix this?
This is how $scope.addDevice(); is currently working:
$scope.devices = [0];
$scope.devicesCounter = 0;
$scope.addDevice = function () {
$scope.devicesCounter++;
$scope.devices.push($scope.devicesCounter);
}
you have the same model on all the dropboxes so that is normal
use in
ng-model="device.selectedModel"
then it will set it to the device and it should work.
It would be best if you push images, manufacturers and models inside of $scope.devices.
Also use angular.copy() to copy object instead of passing reference. That way you can modify each object individually.
One more thing i changed is track by $index after ng-repeat. This is necessary since we are pushing identical object into array which is not allowed within ng-repeat. You can change devices array to object with some generic keys if you want to avoid track by.
And lastly, set ng-model to device.childProperty. Now you have all data you need inside devices array.
Here is the example plunk
Related
I have a json in which I am getting search result with multiple arrays:
After this you can see in the below image that I am getting another array with index [0-20] which actually consist of data I want to display:
with single ng-repeat it does not seems to be possible I guess and after struggling a lot I am here to ask help.
<ul vertilize-container class="grid-menu-list">
<li vertilize class="grid-menu-item explore" ng-repeat="trending in trendings">
<p class="item-title">Title</p>
<p class="sub-title">{{trendings.title}}</p>
</li>
</ul>
I am working on ionic v1. Please help.
Try This way
Js file
$scope.data = {
blog : [],
---
trending : [
----- ]
}
HTML file
<ul vertilize-container class="grid-menu-list">
<li vertilize class="grid-menu-item explore" ng-repeat="t in trending">
<p class="item-title">Title</p>
<p class="sub-title">{{t.title}}</p>
</li>
</ul>
You should use 2 ng-repeat to achieve the desired result. Here is the sample code. You can use any tag you would prefer for markup. (For convenience I used simple div tag with some styling ).
<div style="display: flex; flex-direction: column">
<div ng-repeat="(key, value) in data">
<span> {{key}} </span>
<div ng-repeat="eachValue in value">
<span> Name: {{eachValue.name}} </span>
</div>
</div>
</div>
I have used dummy data for example. Just use your data with appropriate property names to get the desired result. Here is the working example. https://codepen.io/next1/pen/jKQpLV
I have an ng-repeat of rows. I set them up so you can reorder them with drag-and-drop using Angular Dragula. This works fine, but the ng-repeat $index remains the initial value for each item after dragging. See screen captures below before and after a drag of the "Recipient" row.
Is there a way to update the index? I also want to re-order the menu with javascript, with that button in each row, but for that to work I need to get the current $index (and decrement/increment it) and that won't work if the index is incorrect like this.
Before Drag
After Drag
For what it's worth, this is the answer:
<div class="table-cards-body" dragula="'first-bag'" dragula-model="home.quickReceiveFields">
<div class="table-cards-row drag-item" ng-repeat="field in home.quickReceiveFields track by $index">
<div class="one">{{field.name}}</div>
<div class="two">{{field.type}}</div>
<div class="three">{{field.default}} {{$index}}</div>
<div class="four"><input type="checkbox" ng-model="field.display"></div>
<div class="five"><input type="checkbox" ng-model="field.retain"></div>
<button class="btn btn-default btn-xs" ng-click="home.moveItemUp($index)">^</button>
</div>
</div>
Despite what the docs say on the angular-dragula site, you need to put the dragula-model attribute on the container into which you put the repeating items. Not the ng-repeat itself.
Try to add in ng-repeat track by $index.
I'm repeating elements from a big javascript object literal. Currently, I display the tabbed navigation, image, and title for each product correctly. I cannot get the info to display correctly however. I have the following code:
<div ng-repeat="section in tab.sections" class="product">
<div ng-repeat="child in section.children" ng-if="productIsActive(child, $index)">
<div class="additionalProductInfo">
<nav class="secondaryTabbedNavigation">
<ul>
<li class="active" ng-repeat="pTabs in child.productTabs">
<a class="activelink" href="#">{{pTabs.title}}</a> //title of each tab
</li>
</ul>
</nav>
</div>
<div class="productImage">
<img ng-src="{{ child.productImageURL }}"/> //the product image
</div>
<div class="productInfo">
<h2 class="productTitle">{{ child.title}}</h2> //the product title
<div ng-repeat="info in pTabs.infoData" class="productDescription">
<p>
{{info[1]}} //product info goes here.
</p>
</div>
</div>
</div>
</div>
I also tried "{{info}}" , "{{info[i][i]}}", and a couple things using $index. But when "{{info}}" didn't display anything, I figured I was retrieving the data incorrectly.
Here is the "tabs" javascript object that all this info comes from:
As you can see the product info is in a two dimensional array (the first array with the labels of what the information is (e.g. "Title", "Link") and the corresponding information is in the second array. I know this may not be ideal, but this information is currently grabbed from .csv files that prone to changing
and I cannot change how they come into this javascript object.
I know this may seem overcomplicated but this is about as deep as I need to go to get data from the large javascript object and I'm very close.
How can I get the contents from the second array in the two dimensional array (infoData[1]) to display like I did with the tabs, image, and title.
Thank you very much for your time!
I'm trying to deal with the issue of scope inside of an ng-repeat loop - I've browsed quite a few questions but have not quite been able to get my code to work.
Controller code:
function Ctrl($scope) {
$scope.lines = [{text: 'res1'}, {text:'res2'}];
}
View:
<div ng-app>
<div ng-controller="Ctrl">
<div ng-repeat="line in lines">
<div class="preview">{{text}}{{$index}}</div>
</div>
<div ng-repeat="line in lines">
<-- typing here should auto update it's preview above -->
<input value="{{line.text}}" ng-model="text{{$index}}"/>
<!-- many other fields here that will also affect the preview -->
</div>
</div>
</div>
Here's a fiddle: http://jsfiddle.net/cyberwombat/zqTah/
Basically I have an object (it's a flyer generator) which contains multiple lines of text. Each line of text can be tweaked by the user (text, font, size, color, etc) and I want to create a preview for it. The example above only shows the input field to enter text and I would like that to automatically/as-you-type update the preview div but there will be many more controls.
I am also not sure I got the code right for the looping index - is that the best way to create a ng-model name inside the loop?
For each iteration of the ng-repeat loop, line is a reference to an object in your array. Therefore, to preview the value, use {{line.text}}.
Similarly, to databind to the text, databind to the same: ng-model="line.text". You don't need to use value when using ng-model (actually you shouldn't).
Fiddle.
For a more in-depth look at scopes and ng-repeat, see What are the nuances of scope prototypal / prototypical inheritance in AngularJS?, section ng-repeat.
<h4>Order List</h4>
<ul>
<li ng-repeat="val in filter_option.order">
<span>
<input title="{{filter_option.order_name[$index]}}" type="radio" ng-model="filter_param.order_option" ng-value="'{{val}}'" />
{{filter_option.order_name[$index]}}
</span>
<select title="" ng-model="filter_param[val]">
<option value="asc">Asc</option>
<option value="desc">Desc</option>
</select>
</li>
</ul>
I am new to javascript and especially dojo and I got stuck to, I assume quite simple task, but I just cannot solve it.
Basically what I'm trying to do is the following:
When I click on a listitem I should be sent to another view. I am doing this with:
<li data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="moveTo:'#'" onClick="transitionTo('#recommend',1);">Recommend App</li>
Now the div with id=recommend` has got 2 listitems.
<div id="recommend" data-dojo-type="dojox.mobile.ScrollableView">
<div class="belowTab" style="width: 100%;"> </div>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem">via Email</li>
<li data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="moveTo:'#'" onClick="postToWall();">via Facebook</li>
</div>
</ul>
I want to make both listitems visible if some particular function returns true otherwise hide 2nd listitem and show just 1st.
I want to know the logic and how to approach this idea of integrating an if-statement together with the div
There is a rather unpoorly documented method of creating event hooks as markup which i will demonstrate here. However it would be better to create a function in your codebase and then set it as a dojoProps attribute, e.g. function myonclick() { ... } and <div data-dojo-type="dijit._Widget" data-dojo-props="onClick: myonclick"></div>.
To achieve this, you need to figure out which events the View widget offers. Easist way to do this is to simply open the dojotoolkit-src/dojox/mobile/View.js file - the ones youre looking for are probably onStartView || onBeforeTransitionIn?
Via markup, we now create dojo/method to onBefore.. so that you may manipulate children in your list. You have a stray closing </div> tag by the way.
<div id="recommend" data-dojo-type="dojox.mobile.ScrollableView">
<div class="belowTab" style="width: 100%;"> </div>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem">via Email</li>
<li data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="moveTo:'#'" onClick="postToWall();">via Facebook</li>
</ul>
<script type="dojo/method" event="onBeforeTransitionIn" args="moveTo, dir, transition, context, method">
// onBeforeTransitionIn(moveTo, dir, transition, context, method):
var listWidget = dijit.byNode(dojo.query("#recommended ul")[0]);
// say you have a function with true/false return, if item should show
dojo.forEach(listWidget.getChildren(), function(Item, idx) {
dojo.style(Item.domNode, {
display: showItem(Item) ? '' : 'none'
});
});
</script>
</div>