Quick questions. Im generating part of a form dynamically, namely the radio buttons part and I am using an ng-repeat. To do this I have the following code to loop through and list the radio button options:
<div ng-repeat="choice in question.choices">
<input name="{{q.name}}" type="radio" value={{choice.id}} ng-model="choice_[q.answer]" required /> {{choice.choice}}
</div>
I have two issues with this, firstly, im not sure if I am correctly assigning my ng-model dynamically.
Secondly once the model is created it seems to be in its own scope and unusable outside of the repeat due to it being encapsulated within the repeat div.
Is there a way I would be able to access this model? perhaps just passing it through the parent scope using $parent or so?
Any help would be appreciated.
Thanks
I created a plunker to show how to access your model:
Model access demo
<input type="radio" value={{choice.id}} ng-model="$parent.choice" required /> {{choice.choice}}
I used the same model name for every input in the repeat. This way whichever input is selected becomes the active model. That should solve your model naming issue.
Secondly, ng-repeat creates a scope for every template it produces, so you do want to use $parent to access the model on your controllers scope.
Related
I am working on angular application. I need to bind two model variable using ng-bind and two variables from two different scope (One from parent and other from child scope). Is that possible?
Here is the code what I tried:
<input tabindex="2" id="{{ClientAC}}" ng-model="a.ClientAC"
ng-blur="clientFocusout()" ng-keydown="clientKeyDown($event)" />
I am using the tabs directive from the UI Bootstrap Library (0.11) together with Angular (v1.3.0-beta.10).
In my Tab I use a select Element and bind with a variable in my scope. If I change the value of the select element the model in the controller does not change. After a while I have tried to use the $parent scope in my select element.
<select ng-hide="$parent.hideDimensionPartBenchmark"
id="dimension-part-benchmark"
class="form-control"
ng-model="$parent.dimensionPartBenchmark"
ng-options="dpb.name for dpb in $parent.dimensionPartsBenchmark"></select>
With this attempt the model changes.
Is this the right way for model-view binding?
regards,
Marko
Update
I have created a plunker, but there I can not reproduce the problem: http://plnkr.co/edit/B5RC2Iivqkv2zzkKNFFV?p=preview
The only difference between this example an my project is, that I load a part of the site with the tabs.
For a project I'm working on at the moment, I need to have styles which aren't supported on regular checkbox elements.
To work around this I've created an angular directive which recreates the checkbox functionality. While this is working for me, I do question that I'm using the correct html markup as something doesn't feel right about what I've got.
Traditionally you'd use something like this for a checkbox with a label:
<label>
<input type="checkbox" /> Click to check
</label>
and by clicking on the label it'd toggle the checkbox.
Since I'd like to replicate this functionality with angular, I've knocked up a demo here that I believe does the trick but I wonder if I'm missing something? I suppose it's worth mentioning that screen readers are not an issue with this project. I also considered how this may render on mobile devices but since it's only a checkbox it should work correctly.
Have I approached this correctly or am I doing something hideously wrong here?
I think you don't need scope variables you defined in directive.
{elementId: '#', isChecked:'=?'}
By the way, what did you want to tell with those '=?' ? Actually it goes 'typeOfVariableConnection'+'attributeName'. So by your way, it should accept two-way binding with attribute named '?'. I don't think such attribute name is allowed by HTML specification.
But you will need value of checkbox outside the my-checkbox directive, so it will be a good idea to pass some scope variable to that directive to have access to it's value in controller.
I've changed plunker a little bit, connected native checkbox and your own by same model value. http://plnkr.co/edit/bJF1uggJjksiRT7Zkj9M?p=preview
What I'm trying to do is make a number of dynamic radio/checkbox fields based on data that is passed to me. Unfortunately I don't have control over the format of this data but it should be ok to get the job done.
This is as far as I have got: http://plnkr.co/edit/LKwueHUzSrC5JpeBY9So
The format of the data I need to end up with in the end is a simple array like this:
"school_type": [
"Government/State",
"International",
"Co-educational"
]
This data could come from a radio box, or a checkbox if it's selected. Checkboxes are displayed if there is only one option, radios if more than one.
So I can get the fields displaying, but the issues I have are:
The name properties on the radio buttons don't seem to work for
each set.
I can't work out how to get the value of the checkbox/radio selected... back to the controller and into the array I need. I thought the easiest way would be to use the ng-change property available and pass a function to this but I keep getting errors every way I try.
Any help would be appreciated.
There's a couple of problems with your code:
You're not using interpolation where it is needed;
You're not binding the controls to the scope;
Here's your updated code:
<label ng-switch-when="r" class="radio">
<div ng-repeat="option in options">
<input type="radio" name="{{fieldname}}" ng-model="$parent.$parent.selectedid" value="{{option}}">
<span>{{ option }}</span>
</div>
</label>
<label ng-switch-when="c" class="checkbox">
<input type="checkbox" name="{{fieldname}}" ng-false-value="" ng-true-value="{{options[0]}}" ng-model="$parent.selectedid">
<span>{{ options[0] }}</span>
</label>
Note that in order to bind the controls correctly I had to use $parent.$parent for the radio buttons and $parent for the checkbox. That was needed because both ng-switch and ng-repeatcreate new child scopes. So I had to go up one level for the checkbox and two ones for the radio buttons. That could be avoided if you used an object instead of primitives for the bindings. I suggest that you try to refactor your code so it does that. This article has more information on that matter.
And finally, here's a working version of your Plunker.
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.