I'm trying to do a column edit using angularjs & x-editable, with the form defined in the thead attribute. This works when I do the markup for each column individually, but I'm looking to define the columns using ng-repeat, which doesn't work.
It seems like the form controller doesn't get added to the scope, so the x-editable fields can't reference it using $parse(attrs.eForm)(scope); from xeditable.js
My guess is that its some kind of scope issue with the form being defined in an ng-repeat, but I'm new to angular so don't know much more than that.
jsfiddle showing the problem. using an ng-repeat with only one item in it, and the html is not even referencing those properties for testing purposes.
<td style="width: 40%">
<td ng-repeat="header in headers" style="width:40%">
thanks for the help!
It's a bit late but here is the jsFiddle. The trick is to use table form instead of normal form when you create dynamic forms using angular xeditable :)
e-form="rowform"
Link to the documentation on table form (or row editable) is here
use div ng-form="myngformname" editable-form
Related
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
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.
I have having some trouble utilizing the angular bootstrap-ui btn-checkbox directive and its interaction with a ng-repeat directive. The way the directive appears to be setup is that you have to manually name each individual model for a multi checkbox scenario, which is either not possible within an ng-repeat or I haven't found how to accomplish this.
I found an answer somewhat similar to this issue:
Setting and getting bootstrap radio button inside angular repeat loop
and forked the plunker to better explain exactly what I am seeing as a problem.
The plunker can be viewed:
http://plnkr.co/edit/ddiH78pzqE3fsSoq8gAr?p=preview
The answer you linked is the same solution for this problem. Each button within the repeat needs it's own unique property of the model. If they are all set to the same model, as in the plunk $scope.checkboxModel = {id: 0}, when one button is checked, they will all be checked.
So to give each button uniqueness, you could set another property onto the objects within the ng-repeat. This property would hold a boolean value that changes on check. So your model would look like:
$scope.companies = [{"id":2,"name":"A", truthy:false}] // and so on
You would not need to explicitly set this in the controller - just declare the new property right in the button element's model:
<companies ng-repeat="company in companies">
<button type="button" class="btn" ng-model="company.truthy"
btn-checkbox>{{company.name}}</button>
</companies>
Here's the plunk
I would like to use the ui-bootstrap tooltip directive to assign tooltips to an array of buttons which are rendered by an ng-repeat directive, like this:
<button ng-repeat="label in labels" tooltip="{{label}}">{{label}}</button>
but I'm facing a strange issue: the ng-repeat loop variable gets a blank value, except that in the tooltip itself, so for example in the above example the label value would be blank in the button.
A snippet showing the issue could be seen at this link.
Everything is ok removing the tooltip attribute.
Is there anyone who has been using ui-bootstrap and knows about such issues?
You are using old angular-ui lib, This one seems like a bug of Angular-Ui, Looks like they have Fixed it in current version.
Demo: http://plnkr.co/edit/wSzIjgq6JDAAY06iNGrG?p=preview