I'm stuck in the position where I have to work with some pre-generated html elements. For example I have a list like this
<ul>
<li class="product>
<div class="name">product 1</div>
<div class="price">$199</div>
</li>
<li class="product>
<div class="name">product 2</div>
<div class="price">$299</div>
</li>
</ul>
Since the AngularJs has been talking all about dynamically generated content via js, I wonder if there is a way that I can loop through the pre-generated html elements to initialize the models?
Related
Consider the following snippet
ng-if not working
<div class="row">
<div class="col-md-8">
<ul>
<li ng-repeat="bigL in bigLs">
<span ng-if="isObj(bigL)">{{bigL.note}}</span>
<ul ng-if="bigL instanceof Array">
<li ng-repeat="bigLl in bigL">
{{bigLl}}
</li>
</ul>
</li>
</ul>
</div>
</div>
ng-if working
<div class="row">
<div class="col-md-8">
<ul>
<li ng-repeat="bigL in bigLs">
<span ng-if="isObj(bigL)">{{bigL.note}}</span>
<ul ng-if="isArr(bigL)">
<li ng-repeat="bigLl in bigL">
{{bigLl}}
</li>
</ul>
</li>
</ul>
</div>
</div>
Controller
$scope.isArr = function(bigL){
return bigL instanceof Array;
};
I use ng-if to determine whether a nested ul is required to create (by determinate different data type inside the array bigLs), I come to a situation that ng-if cannot evaluate bigL instanceof Array, I then move this snippet inside a function, with the same context, the ng-of works properly, but still cannot understand why it is a need to wrap the expression inside a function instead of running it directly inside the ng-if.
Appreciate for any clarification, thanks!
I'm not exactly sure of the problem, but there are several things that have bad smells in your code:
Don't use 'instanceof Array', ever. It won't work in an angular expression.
Instead, use angular.isArray(). This will only work in javascript by adding a method to your scope.
So, you would want to do something like this:
Controller:
...
$scope.hasChildren = function(bigL1) {
return angular.isArray(bigL1);
}
Template:
...
<ul ng-if="hasChildren(bigL)">
...
As a bonus, it becomes much easier to unit test this code.
I want do some modification with code or with directive to allow:
Limit dragging only vertically(by Y axis)
Make possible to pick up item for dragging only in one place of the
element.
I'm using implementation of this directive. https://github.com/marceljuenemann/angular-drag-and-drop-lists
<ul dnd-list="list.value"
class="list-group"
dnd-allowed-types="['entry']"
dnd-dragover="overItem()"
>
<li ng-repeat="entry in list.value"
dnd-draggable="entry"
dnd-moved="list.value.splice($index, 1)"
dnd-effect-allowed="move"
dnd-type="'entry'"
dnd-dragstart="selectedItem(entry, list.value)">
<div>
<div class="numeric-column">{{$index + 1}}</div>
<div class="col-md-5">{{entry.id}}</div>
<div class="col-md-5">{{entry.name}}</div>
</div>
</li>
</ul>
This code working fine.
Question: can i restrict li element to move only verticaly.
Example: http://jqueryui.com/draggable/#constrain-movement
Is there a way to have content above slicknav menu when responsive? Im trying to move it from being at the top of the page, im trying to get:
====CONTACT DETAILS====
====LOGO====
====SLICKNAV====
Not sure what you have already tried - but you would normally use the prependTo property to place where the menu goes.
e.g.
<div id="d1">Before</div>
<div id="d2">some other content</div>
<div id="d3">third row of content</div>
<div>
<ul style="display:none">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
<div id="d4">4th row of content</div>
and script
$('ul').slicknav({
prependTo:'#d3'
});
Please see this JSFIDDLE for an example of the above
I'm learning AngularJs and I got to a small brick wall...
when I want to split items into tabs, my template is exactly the same for all the tabs, the only small change if the model used in the ng-repeat, as an example:
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="tier6">
<div ng-include="'partials/vehicles-6-details.html'"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tier8">
<div ng-include="'partials/vehicles-8-details.html'"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tier10">
<div ng-include="'partials/vehicles-10-details.html'"></div>
</div>
</div>
This way I have to create 3 exact files, where the template is:
<ul class="list-unstyled list-inline list-tier">
<li ng-repeat="tank in tankInfoLevel6" data-sortby="{{playersByTankId[tank].length}}">
<span class="badge">{{playersByTankId[tank].length}}</span>
<img ng-src="{{tankInfo[tank].image}}" alt="" class="tank-img"
pop-over title="Tank fans" fans="tanksFans[tank]" />
<br><b>{{tankInfo[tank].name_i18n}}</b>
<br>({{tankInfo[tank].type_i18n}})
</li>
</ul>
and the only change is tankInfoLevel6 by tankInfoLevel8 and tankInfoLevel10 respectively.
How can I use a simple file?
I've tried:
<div ng-include="'partials/vehicles-details.html'"
ng-init="tierTanks = tankInfoLevel6"></div>
and also with onLoad and onInclude without any good results.
The output is showing the last tab contents in all tabs, so it seems that it loads all but the last call with tankInfoLevel10 is the one that overrides all the tabs.
Is there a way to make this work neatly?
What about ng-repeat?
<div ng-repeat="tankItem in tankItems">
<div ng-include="'partials/vehicles-details.html'"></div>
</div>
In template use tankItem.
Wouldn't a directive work better here, using an attribute to pass/reference the tankItems list?
My index.html page is like as follows:
<div id="sidepanel" data-ng-controller="ListCtrl">
<li data-ng-repeat="record in records">
{{record.id}}
<input type="checkbox" data-ng-model="addwidget">
</li>
</div>
<div id="main">
<div data-ng-view></div>
</div>
for this data-ng-view i have another page recordlist.html in that i have following code:
<div data-ng-controller="ListCtrl">
<ul class="design">
<li data-ng-repeat="record in records">
<div data-ng-switch data-on="record.category">
<div data-ng-switch-when="reporting1">
<div id="{{record.id}}" data-ng-show="addwidget">{{record.description}}</div>
</div>
<div data-ng-switch-when="reporting2">
<div id="{{record.id}}" data-ng-hide="addwidget">{{record.description}}</div>
</div>
</li>
</ul>
</div>
My question is i want to show the first div when i check the checkbox & when i uncheck it i want to show the second div.When both of the data-ng-model & data-ng-hide/show are on the same page then it works fine but in my case it present on two different pages.
Is it correct ? How can i implement this. Need Help.Thanks.
The problem is that you are setting addwidget in the first controller, but is trying to use it in the second. Controllers are not singletons.
So, in this situation:
<div id="sidepanel" data-ng-controller="ListCtrl">
...
</div>
<div id="main">
<div data-ng-view>
<div data-ng-controller="ListCtrl">
</div>
</div>
</div>
You got two separated controllers and scopes. And you are setting addwidget in the first trying to read in the second.
You can either bind it to the root scope $root.addwidget or use a service share to the states.
As you have many records, binding directly to root is a problem, as all of them are going to share the same state. So you gonna need an object in the rootScope and bind the option by id $root.addwidget[record.id]. Made a pretty simplified modification here.