I have a ng-repeat and each row has a edit button.
When the user click on the edit button. The row will change it's element using ng-switch
For example:
<div>{{sample.name}}</div>
change to
<input type="text" ng-model="{{sample.name}}">
But I cannot figure out how to switch only the row I clicked.
Here is the not working fiddler
Currently you have only a single global variable selection. One option would be to add a selection variable to each datas entry. Or, you could write a directive with it's own scope (make sure to specify an isolate scope) that handles the switch piece of this- then each scope would have it's own selection.
Your approach wont work, because 'ng-switch-when' accepts only primitive strings and can not be evaluated.
Related
I have an app where I display callback results in a table.
I'm trying to figure out how to highlight a row that I click on when I display details for that record.
I thought it might be possible using the $event method and applying a class change based on a property returned there.
Any suggestions would be great!
You could use the ngClass directive on the row to set a class depending upon the value of a scope variable. Then use ngClick on the row to set the value of that scope variable.
<tr ng-class="{'highlight':activeRow===0 }" ng-click="rowClick(0)">
I have created a fiddle here
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.
Here's a Plunkr: http://plnkr.co/edit/Vr3z4bxFmsiJPs1ye2Vd.
The ngRepeat directive adds an empty option at the top when ngIf is present on the first option element which is supposed to be default.
Is there anyway to avoid that?
I want to use ngRepeat, not ngOptions.
Thanks.
ng-model binds two-way, so you are trying to bind the selection to numbers instead of variables, and I don't know what exactly are you trying to do... but this is the cause of the problem
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 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.