I'm using the smart-table without $scope object, it looks fine, but the selection and callbacks works weird (selection happens only half the time) or do not work at all.
Here, I found an example, as you can see, the row selection works fine.
But if we change syntax to use 'controller As' style, then, it does not work
For now, I will modify my code to use the $scope. But, being a beginner in AngularJS, I would be glad if someone told me why this happens and is there any way to fix that, thank you beforehand.
your ng-options should be like this
<select ng-model="events"
ng-options="event as event.label for event in vm.events"></select>
the event as event.label for event in vm.events means you're pointing to event.label as the event model for each event in vm.events
ngOptions
then add data in the controller
here is your updated plunk
Edit 1
to select the entire row you can bind ng-click to the <tr>, and pass it the current row, like so
<tr ng-click="vm.selectRow(row)" ... >
to highlight the row, you can use ng-class like so
<tr ... ng-class="{"highlight": row.selected===true}">
and handle the selection logic in the controller. there are a lot of ways to implement this.
forked the last plunk
Related
I'm building a questionnaire out of directives which show the correct input based on certain expectations. Those expectations (including any formerly given input from the user) comes from a parent $scope. Everything is set up in the link function of AngularJS's directive definition object
Where things go wrong is when using md-checkbox: the ng-model of the checkbox inside the directive is set to true, the md-checkbox is still false. I can confirm that by adding a simple input type="checkbox" with the same ng-model property, the simple checkbox is checked, whereas the md-checkbox isn't.
Whenever I click on the md-checkbox twice, it does get checked. So I gather that there is something wrong with the binding. I built a CodePen which demonstrates it. The code inside the pen is almost taken verbatim from my source code
Stuff that I already tried:
Using $scope.$apply() after handling all (DOM) logic in the link function
Idem but with $scope.$digest()
Setting a $timeout with no delay (as way of a 'safe' $apply())
Even going so far as to store the current answer (true or false) in a variable, setting the ng-model property to undefined, and then setting it back to the stored value, all inside a $timeout
I'm at loss here, it looks like something simple given the fact that all the other inputs have their correct data in it.
Replace class with ng-class because ng-class lets you to dynamically bind the class to the element
Depending on your codepen the problem is class="md-checkbox-{{expression}}". I forked your codepen. You can use ng-class. I think this is a bug.
i am using angularjs to write right click event for selected row in ng-grid.but i want to know is any inbuilt right click event there in ng-grid.if it is there please suggest me.
Thanks
A directive may be used to bind required actions on a right click, by using contextmenu event.
You can also refer to answers to this question.
I think you need to define a celltemplate with the required conditions. Something like this by defining a directive
insert ng-click event into ng-grid
I'm having difficulty getting a css animation for movement in an angular ng-repeat list. I have a plunker here: http://plnkr.co/edit/KIcTiJ?p=preview
As you can see, the ng-enter animation is processed when the plunker is first loaded. However, I can't find any way to have an animation get triggered for list movement. In the example, by clicking on the arrows, the ng-hide is processed, and I would expect the ng-move animation to be triggered, but I'm wondering if I'm misunderstanding how the ng-repeat move animation is triggered.
In either case, can anyone suggest a better way for me to get angular 1.2 animations applied to this list when I click the left and right arrows in that example? I have tried alternate methods of generating the ng-repeat (I could use an angular filter instead of an ng-hide), and I've tried different css transitions, but I can't seem to get anything to work. Any advice here would be greatly appreciated on how to progress.
Sorry if this question seems like a repeat, but I looked through similar questions on stackoverflow, but the only other answers I could find were for the older angular animation framework, or suggested custom javascript animation, which I was hoping to avoid.
ng-repeat animation work if the collection has changed. You can use $filter to reflect your change in the collection.
<li ng-class="{'text-danger': item == f}" ng-repeat="item in items| filter: filteredData" class="animate-repeat">
<span>{{item}}</span>
</li>
Here filteredData is a controller function which execute your filter logic. (you can write custom filter as well)
$scope.filteredData = function(item) {
return (Math.abs($scope.f - item) < 2);
}
Check the updated Plunker how animation works.
I am trying to create Master Details in table
here is the plnkr Code
but as i start putting filter for the ng-repeat the dom rendering behaves weird
click the + button to expand row and the search the textbox
am i doing some thing wrong
My guess is that ng-repeat-end and ng-if do not play well together. If you place the ng-if in the <p> element, your example is working. Of course this has the (undesired?) effect of allways including the details row in the DOM, event though it will be hidden.
Is ng-model allowed inside element of a table? Will angular automatically update the model if I change a particular column(i.e. view)?
If you are making the table cells directly editable using the HTML contenteditable attribute, ng-model won't work automatically as by default it's only for form elements.
It is possible to make it work with contenteditable though. There is an working example of how to do it on the angular website at http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController
ng-model is allowed wherever typical form elements exist that can use the directive (input, select and textarea)
One thing I will say about ng-model that can make it a bit tricky is that you will want to bind ng-model to a property of an object rather than just a simple scope variable. I have run into several instances where I bind $scope.foo to ng-model and use it in an input control. Then, if you clear the input field, the binding is lost and it stops updating the variable. Use something like $scope.fooObj.modelProp where fooObj is an object and it will work fine.