I have select and list:
<select ng-model="atndYearSelected" ng-options="year for year in atnd_years|orderBy:'-year'"
ng-change="getAttendance(selectedYear,month.number,infoList['0']['staff_id']);" class="year"></select>
<ul class="year_selection">
<li ng-repeat="month in monthsList" ng-class="{active_year : isActiveYear(month.number)}">
<a href="" ng-click="setActiveYear(month.number); getAttendance(atndYearSelected,month.number,infoList['0']['staff_id']);">
{{month.month}}
</a>
</li>
</ul>
getAttendance function works fine on ng-click inside the list. However I cant access month.number value inside ng-change. Is there any way to access month number value?
I tried to use ng-init inside of the link but it didnt work.
month is only available inside your ng-repeat within the li. Thus <select> has no access to it.
The work around to this is to store it in a scope variable when setActiveYear of li is called, and you can use this scope variabl when you want to.
$scope.setActiveYear = function(monthNumber){
//...other codes
$scope.myValue = monthNumber;
};
Related
Hey I have array of numbers, I am writing them using ng-repeat. When you click on some number should be pass to function passParameterToService parameter index and should be saved in service to variable this.whichBoard. But I have do something wrong, can someone tell me why ng-repeat don't work when I add service and why after click on some number, it's dont write to a variable?
demo
https://codepen.io/Turqus/pen/WXEryN
In your service you were declaring this.whichBoard but inside the function you again used the same named variable. If you set this.board inside, it would probably work:
app.service('serwis', ()=> {
this.whichBoard = (index) => {
this.board = index;
};
});
Also in the calling method, you have:
<a href="#" ng-click="passParameterToService($index)">
<span ng-repeat="item in arrayIndex">{{item}}</span>
</a>
You're passing $index, which isn't a value. Also, you have the repeat inside the method call, so change it to:
<div ng-repeat="item in arrayIndex track by $index">
{{item}}
</div>
I have a list of posts with comments. I need to traverse through array of comments inside each of the posts on my page. I'm trying to create variable inside ngRepeat for posts which I can use like an indexer to display exact comment for each post. Due to ngRepeat creating nested scope, this variable must be unique for each iteration. But when I'm trying to change it with ng-click, it doesn't change.
My ngRepeat:
<div class="question_block col-xs-12"
ng-repeat="answer in question.content.answer track by answer.id">
is followed by <span style="display:none">{{counter=0}}</span>. And then I'm showing some items like <span>{{answer.comments[counter].user.organization.title}}</span>. When I'm trying to do something like <a href ng-click="counter++">Increment</a> nothing happens. What's the matter ?
Use ng-init="counter = 0" and attach your ng-click to a function in your controller:
<div ng-repeat="item in items track by $index" ng-init="counter=0">
{{item}} ({{counter}})
<button ng-click="clickHandler()">Increment</button>
<hr />
</div>
Then, to increment counter in the context of the event, use this.counter
$scope.clickHandler = function() {
this.counter++;
};
Plunker demo : http://plnkr.co/edit/J4d0JlJSKD7i4OfMT2r4?p=preview
have this ng-repeat
<li class="tmmenu-admin-tabs-builder-panel-portlet" ng-repeat="question in questions">
<div>
<span class="tmmenu-admin-tabs-builder-panel-portlet-toggler" ng-click="tatbppTogler()">{{{tatbppt}}}</span>
<span class="tmmenu-admin-tabs-builder-panel-portlet-number">{{question.id}}</span>
{{question.text}}
</div>
<div class="tmmenu-admin-tabs-builder-panel-portlet-options" ng-show="showTatbppo">
...
</div>
</li>
I want, for click in "tmmenu-admin-tabs-builder-panel-portlet-toggler" change visibility "tmmenu-admin-tabs-builder-panel-portlet-options" and change text in "tmmenu-admin-tabs-builder-panel-portlet-toggler".
And i write this code for get result:
$scope.tatbppTogler = function(){
$scope.showTatbppo = !$scope.showTatbppo;
if($scope.showTatbppo){
$scope.tatbppt = "-";
}else{
$scope.tatbppt = "+";
}
}
It's works, but changed dom in all "Li", how changed only current (where user click) "li"?
You can do it like this:
<li class=portlet" ng-repeat="question in questions">
<div>
<span class="toggler" ng-click="showTatbppo=!showTatbppo">{{showTatbppo ? "+" : "-" }}</span>
<span class="number">{{question.id}}</span>
{{question.text}}
</div>
<div class="options" ng-show="showTatbppo">
...
</div>
</li>
Working fiddle, with this concept:
http://jsfiddle.net/x1nguaxj/
btw. You have very-very-very long css class names :)
1 way
you can pass this in ng-click="tatbppTogler(this)" and then in function manipulate with this
2 way
you can create custom directive and apply it to your li element and then on this directive bind click to element and listen , and on click function will be triggered your listener and you will have access on this element
You can create an attribute id for each question and then change based on the id of the question you clicked
I would suggest you'd take a look at $index. From the angularjs docs:
iterator offset of the repeated element (0..length-1)
Using this, you can clearly determine the certain div that was clicked on.
I use routing to load different templates into a ngView. One of the templates has a simple controller which contains an array of contacts. What I'm trying to do here is as simple as by clicking a link (ngclick) call a function and add a new object into the array which I expect will be reflected in my UI.
It's something like this:
$scope.contacts = [{name='', email=''}];
<li ng-repeat="con in contacts">
<input type="text" ng-model="con.name"/>
<input type="email" ng-model="con.email"/>
</li>
<li>
<a href ng-click="addContact()">add</a>
</li>
$scope.addContact = function() {
$scope.contacts.push( {name='', email=''} ); //-- i can use either $scope or this to reference the array and works.
}
So, the UI renders well with the initial value, the addContact function is invoked on click and I see the value is pushed (length = 2) but then the function ends the array seems to be reset to one element (lenght = 1) after angularjs evaluation.
I'm not sure if this is occurring because I use ngView. I mean, I reviewed this example (http://code.angularjs.org/1.0.3/docs/api/ng.directive:ngController) and I don't see much differences of what I'm trying to do here, the diff is that I use routing with ngView.
fiddle: http://jsfiddle.net/fdDph/
Help is much appreciated.
In your Fiddle, you are resetting the array length to 1 in the ng-show:
<span ng-hide="contacts.length = 1">
Do this and it will work:
<span ng-hide="contacts.length == 1">
{name='', email=''} is wrong syntax btw, it should be {name:'', email:''}
I am trying to ng-click assign a variable (success) inside an ng-repeat and then use that value outside of the ng-repeat(failure) as follows:
<div class="stocksNav col s1">
<div class="myStockList" ng-repeat="stocksInPortfolio in ctrl.myPortfolio.stocksInPortfolio">
<ul>
<li style="position: relative"><a href ng-click="ctrl.tab = stocksInPortfolio.stock._id">{{stocksInPortfolio.stock.name | limitTo:10}}</a></li>
</ul>
<div class="myStockView" ng-show="ctrl.tab === stocksInPortfolio.stock._id">
<div class="{ active:ctrl.tab === stocksInPortfolio.stock._id }">
</div>
</div>
</div>
</div>
<div ng-include="'/app/dashboard/partials/myIndividualStock.html'"></div>
the partial wants to then call ctrl.tab to use it's click event assigned values, such that if i ng-click on any other instance of the ng-repeat function the ctrl.tab variable will reassign, but the ctrl.tab assignment does not persist outside of the ng-repeat div. any thought?
The ng-repeat directive (as many other directives) creates a new scope, and to access a parent's scope variable, it needs to be an object. In other words, instead of ctrl.tab, initialize a object $scope.something = {} in your controller, then use ctrl.something.tab in your template (replace something with a name proper to your application).