The following code display all the divs one after another :
<ul class="record">
<li id="{{record.id}}" ng-repeat="record in records">
<div> Widget Code.... </div>
</li>
</ul>
Apart from this I have following clickable list menu at the right side in a drop down fashion :
<li ng-repeat="choice in items">
{{choice}}
</li>
Now on click of each list item i want to add the same <div> Widget Code.... </div> which append the existing divs on the page.
My recent view is as following now i want to add div on click of each of list item just after the existing divs.
Need Help. Thank you.
This should do the trick:
<li ng-repeat="choice in items">
{{choice}}
</li>
And then in your controller:
var addRecord = function(){
$scope.records.push({id: 10}); // change to generate your own id
};
Related
Could you please help me to auto select the first item for the menu on the left.
here is my code : https://next.plnkr.co/edit/4pGTMsVlSiFo7eoS?preview
Like this:
<div class="floatingbox list">
<input type="text" ng-model="check" placeholder="search applets"
ng-init="setSelectedModel(model[0])">
<ul>
<li ng-repeat="model in model | filter:check">
<a class="listItem" href ng-click='setSelectedModel(model)'>{{model.key}}</a></li>
</li>
</ul>
</div>
Notice the ng-init="setSelectedModel(model[0]) that selects the 1st item on page load by calling the same function that would be used when clicked on a certain item.
If I read what you wanted correctly.
I have a project with Angular where I don't want to use a select element with ng-options, so I made up a list with different options in order to select one of them.
<div class="countrylist">
<ul>
<li ng-repeat="c in shippingCountry"><p>{{c.name}}</p></li>
</ul>
</div>
So the option selected would modify another element where the chosen option would be displayed.
<div>
<ul>
<li>{{selectedCountry}}</li>
</ul>
</div>
In order to do that, I would need to pass the data from the chosen option of the first element into the 2nd one. I have tried doing something like this
<li ng-repeat="c in shippingCountry" ng-click="selectedCountry = {{c}}"><p>{{c.name}}</p></li>
with no success.
You can check the plunker here Thanks in advance
I suggest you to use a function over there like this in the DEMO
<li ng-repeat="c in shippingCountry" ng-click="Click(c)"><p>{{c.name}}</p></li>
Having this method in your controller
$scope.Click=function (c)
{
$scope.select=c;
}
It creates child scope for each iteration, so explicitly refer parent scope:
Change like this,
<ul>
<li ng-repeat="c in shippingCountry" ng-click="$parent.selectedCountry = c"><p>{{c.name}}</p></li>
</ul>
DEMO
I've fixed your plunker here. It would be better to use methods in scope for this operations because they work in current scope, not in child
<li ng-repeat="c in shippingCountry" ng-click="selectCountry(c)">
<p>{{c.name}}</p>
</li>
// .html
<div>
<ul>
<li>{{selectedCountry.item}}</li>
</ul>
</div>
<div class="countrylist">
<ul>
<li ng-repeat="c in shippingCountry" ng-click="selectedCountry.item = c"><p>{{c.name}}</p></li>
</ul>
</div>
// controller
$scope.selectedCountry = {
item: $scope.shippingCountry[0]
};
Example
I have a list of items where each item is clickable and should trigger the submit(id) function. I would like to disable all items (buttons) when one of them is clicked.
<ul>
<li ng-repeat="item in items">
<button ng-click="submit(item.id)">Submit</button>
</li>
</ul>
I could define $scope.submitted variable in a controller and then set ng-disabled="submitted" in my view. I could also wrap it into a <form> and use frm.$submitted. Well... I would like to define everything inside view.
I search for an elegant solution where a don't have to define a $scope variable to achieve this. What do you propose?
If you do not want to define a property in the controller, and assuming that submit function never fails to submit. You could utilize the items array itself, by adding a property when click happens and after submit function is run.
<ul>
<li ng-repeat="item in items">
<button ng-click="submit(item.id); items.submitted=true"
ng-disabled="items.submitted">Submit</button>
</li>
</ul>
With this you are adding a property in the array items (so that it is available across child scopes of ng-repeat as well as items is set on its parent scope) so essentially you are not defining a new scope variable for this.
angular.module('app',[]).controller('ctrl', function($scope){
$scope.items = [{id:1},{id:2},{id:3},{id:4}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<ul>
<li ng-repeat="item in items">
<button ng-click="submit(item.id); items.submitted=true"
ng-disabled="items.submitted">Submit</button>
</li>
</ul>
</div>
Today I faced a strange problem for me in AngularJS.
In this example I have two ng-repeat in product (two or three images and the same number of colors) and one ng-repeat for pagination (irrelevant in this case I assume).
HTML:
<div class="item-wrapper" ng-repeat="item in pagedItems[currentPage]">
<div class="item">
<!-- Item image -->
<div class="item-image">
<ul>
<li ng-repeat="desc in item._source.description" ng-show="$first">
<img class="preview" ng-src="server/{{desc.smallImage.url}}">
</li>
</ul>
</div>
<!-- Item details -->
<div class="item-details">
<div class="product-colors">
<ul class="btn-group pull-right">
<li ng-repeat="color in item._source.description">
<img class="color" ng-src="server/{{color.thumbnailImage.url}}" />
</li>
</ul>
</div>
</div>
</div>
All I wanted to do is that click on one of colors (img.color) changes corresponding img.preview visibility. In my attempts I was always able to changed every img.preview in whole list, not the one I clicked on.
MY ATTEMPTS:
HTML
<li ng-repeat="desc in item._source.description" ng-show="$index === selectedColor">
<li ng-repeat="color in item._source.description" ng-click="changeColor($index)">
JS (controller)
$scope.changeColor = function(idx) {
$scope.selectedColor = idx || 0; //default show always first img.preview from list
};
MY ATTEMPTS #2 (working)
HTML
<li><img class="preview" ng-src="server/{{desc[__selected === $index ? __num : 0].smallImage.url}}">
<li ng-repeat="color in item._source.description" ng-click="changeColor($index, key)">
JS (controller)
$scope.changeColor = function(idx, key) {
$scope.__selected = key;
$scope.__num = idx;
};
This might be quite simple:
Considering desc and color will be referring to same object as they are of the same source.
So, desc and color should be identical and setting a property on either of them supposed to reflect on the other.
Make the changes as follow and try, havent tested though:
<li ng-repeat="desc in item._source.description" ng-show="item.__selected ? desc==item.__selected : $first">
and
<li ng-repeat="color in item._source.description">
<img class="color" ng-src="server/{{color.thumbnailImage.url}}" ng-click="item.__selected = color" />
</li>
Here is my current code.
What I am trying to do is to: generate different content after click each dropdown toggle.
For example, when text is clicked, "Text" shows under the button.
Could someone help me on that?
Thanks in advance!
You have to remove the ng-model from the li element & add a ng-click handler to your a tag. This way you can use the choice that you selected for whatever you want to do with it.
Example: http://plnkr.co/edit/oTHWf2I266SHjur5Ebv8?p=preview
HTML:
<!-- ADD ITEM BUTTON -->
<li class="dropdown">
<button class="btn btn-default dropdown-toggle">Add item</button>
<ul class="dropdown-menu">
<li ng-repeat="choice in items">
<a ng-click="selectItem(choice)">{{choice.type}}</a>
</li>
</ul>
</li>
{{selection}}
JS:
$scope.selection = {};
$scope.selectItem = function(choice) {
$scope.selection = choice;
}