AngularJS checkbox placed inside ng-repeat not binding - angularjs

I have a checkbox (bound to a model), placed inside an ng-repeat tag which iterates over a list.
I want to send a value "YES" or "NO" depending on whether the box is checked or not to the controller using the ng-true-value and ng-false-value attributes.
But for some reason, the $scope.value2 is not getting updated in the controller.
Here is a jsFiddle with my problem:: http://jsfiddle.net/HmvgW/
Note: If I place the checkbox outside the ng-repeat tag, the YES/NO value is sent correctly to the controller.
How do I send a value to checkbox clicked value to the controller if I place it inside the ng-repeat tag?
Thanks!

It's a scope issue. ng-repeat creates a new child scope with each loop. If you want to access the parent scope from within the child, you can do so with $parent.value2.

Related

Repeating custom directive to attach to array property for input

I have created a plunkr. Where I need to get the custom directive repeating . However what I need is when i click the check button then all the inputs should be populated inside the slides array in presentation-controller and then I can work with that array.
The problem is the directive is actually adding inputs. When I click the check button, all the inputs should be populated inside the presentation-controller's $scope.slides[] array.
Repeating directive attaching to controller array property
I think your problem is on the view template slide-input.html, here you write ng-bind="slides[0]" and in presentation-controller you write $scope.slides= ["hello"] , when you click plus icon, adding a new directive ,slides[0] always displayed you 'hello'

AngularJS - ng-include binding

I have a binding problem when I use ng-directive.
I read some other post but I don't succedd bind variable in my ng-include.
<ng-include src="'template.html'"
ng-repeat="item in bloc.items"
onload="data=item; highlight=forceHighlight;"></ng-include>
forceHighlight is a scope variable who are well initialized but when the variable change in the controller, change are not passed into the template.
Here a fiddle to demonstrate my problem: http://jsfiddle.net/h24gtw51/2/
The goal is to have a template who display "text" or "zone" or "image", then if i click on the checkbox highlight i want display a border on "text"
I test to add controller in the ng-include but without success.
You don't need to manually bind the variable inside the include - your parent scope is automatically binded, so you can just access it. If you change your directive to use forceHighlight (ignore the onload assignment), your example will work :)
Look at this version of your fiddle.

New scope on form

I have an element, which has an ng-controller, that has some values attached to scope. I have a form element inside this one, which I would like to have create its own child scope. The use case: I want the form to be populated with the parent scope's variables intially, but not have changes on the form propagate up until the user clicks the form's "submit" button.
How would I force the form to have a child scope that inherits from the parent element's scope?
Common approach in your situation is to use "new" object. You use, for example, newuser.name as model for input and then createUser(newuser) on submit.
Here is plnkr demo: http://plnkr.co/edit/3x7T2JgV5yxb9iJqYMYq?p=preview

Getting original scope from multiple selected rows in AngularJS

I have ng-repeat with items from my scope. Each row has a checkbox. When I click on the button which is outside ng-repeat it should call function from controller and from there I need to know know which checkboxes were selected and get their original scope values. I'm able to get selected checkboxes within controller with
$("input:checkbox:checked")
but how can I access it's original scope values (for rows which were selected)?
Thank you in advance.
Never do DOM manipulation in your controller.
The better ways would be
to add items in an array within your controller on selecting, and then on button-click, process the items in the array via a controller method, or
Set a boolean property on each item to true on selection, and then on button-click, process items with that boolean property set to true.
If you give us a jsFiddle for your situation, I or somebody else can give you more details.
Here is a fiddle http://jsfiddle.net/e6NPw/1/
I have a $scope.selected object on the scope and I keep the ids as keys. After that in your function outside your ng-repeat you can pretty much do anything you want, I just make an array of objects like the $scope.results but only with the selected ones.

is ng-model allowed inside <td> element of a table?

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.

Resources