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.
Related
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 believe there is an answer to my question. I do exactly like some solution I found, but still I can't set default value to my dropdown. Here is my code.
<td>
<div ng-controller="daftarGroup" class="ui fluid multiple selection dropdown">
<input name="group" value="admin" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">Group</div>
<div class="menu">
<div ng-repeat="y in groups" class="item" data-value="{{ y.gid }}">
{{ y.gid }}
</div>
</div>
<script type="text/javascript">
$('.ui.dropdown').dropdown();
</script>
</div>
</td>
My dropdown will have a list of group, one of the item is "admin". The data is presented using Angular. Everytime I load the page, I want the dropdown show "admin" as default value. On another fiddle, it run perfectly, but not in my machine. Every time I refresh the page, no value set on my dropdown, but the list of group is accessible. Any idea about my case?
Thanks.
You can use data-ng-options and ng-init with ng-model to have a default value.
HTML:
<select
ng-init="group = groups[0]"
ng-model="group"
data-ng-options="y.gid for y in groups">
</select>
Angular controller:
$scope.groups = [
{gid: 1},
{gid: 2}
];
I'm new to AngularJS so please be kind to me.. :-P
So I'm looping twice with ng-repeat as in this example:
<ul>
<li ng-repeat="b in aMSG">
<p>{{b.name}}</p>
<ul>
<li ng-repeat="c in b.x"><a ng-click="getM($parent.$index,$index)" href="#">{{c.name}}</a></i>
</ul>
</li>
</ul>
See the fiddle: http://jsfiddle.net/trK98/
But when I apply a filter to search for text within the children:
<ul>
<li ng-repeat="b in aMSG">
<p>{{b.name}}</p>
<input type="text" ng-model="search" placeholder="Search for?">
<ul>
<li ng-repeat="c in b.x|filter:search"><a ng-click="getM($parent.$index,$index)" href="#">{{c.name}}</a></i>
</ul>
</li>
</ul>
The $index is lost as you can see here: http://jsfiddle.net/zb2kc/
(search for instance for juice then click on it you'll see $index = 0)
What am I doing wrong?
Thank you!
P.S: Sorry for my poor english.
Never use $index for any kind of logic. It can be used for managing CSS classes only. It's a highly volatile variable and will be changed after any change in source array (deletion, re-ordering), so $index is not bind to element of array, but only to position of some element in current view rendering.
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
};
i repeat things in ng repeat like so
<div class="" ng-repeat="deutscheBankEvent in deutscheBankEvents">
<div class="schrottler-opened schrottler" title="">
<span class="presse_ueber" style="font-size:22px;margin-left:10px;font-weight: normal;margin-top:5px">{{deutscheBankEvent.name}}</span>
</div>
<!-- data-ng-repeat also possible-->
<div class="">
<div class="presse_content">
<Div style="color:white">{{deutscheBankEvent.name}}</div>
<ul class="liste_k">
<li ng-repeat="list in deutscheBankEvent.list">
{{list}}
</li>
</ul>
</div>
</div>
later down the code comes up a form to register to events. the form is hidden until user selects a place and date via select. this is triggered like so:
<span ng-show="myForm.locationDate.$valid">
my issue now is: this shows up all hidden form elements when one select is valid.
how can i set the scope to only this one changed?
Since ng-repeat creates a new scope, changing ng-show/ng-hide conditions to scope bound properties will work perfectly (example).