Is there a way to bind via html to a variable property in angular 1.x?
I have a data object that I need to update based on certain conditions, which would change the property it should bind to:
<div ng-repeat="option in options">
<custom-component selected="$ctrl.data[option.dataProperty]"></custom-component>
</div>
I can't seem to get it to bind into the customComponent with one or two way bindings. Would appreciate any other suggestions.
Update:
Thanks for the comments, writing the plunker illuminated the problem for me :) you can find it here for posterity's sake. Thanks!
Related
My use case is completely different. When I strip off all the other factors, it boils down to this.
Say I have the following input element
<input type="text" [customDirective] [(ngModel)]="myValue" >
The job of this customDirective is to look into value entered by the user and changed its value based on the input on the fly.
How to achieve two-way binding for this.
I played around with ControlValueAccessor, DefaultValueAccessor. But no matter what I do, I was not able to achieve the two-way binding. The maximum I achieved at one time is view update on model update but not the other way round. But that code is somewhere lost.
Here is the vanilla plunker link.
PS: I already referred the following. But none of them were helpful in achieving 2-way binding w.r.t to directive
http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html
angular2 wysiwyg tinymce implementation and 2-way-binding
Thanks in advance
Finally figured out how to do this.
Model to UI changes can be done using ControlValueAcessor
UI to Model can be done like below
import {Output} from '#angular/core';
Use the event emitter
#Output() ngModelChange = new EventEmitter();
Whenever data gets changed emit the event
this.ngModelChange.emit(YOUR_NEW_VALUE);
Here is the detailed example
Using Tinymce editor as a directive
I have an angular service that returns a list of items from the database.
I display those items through an ng-repeat. I'd like to hide/show each one of them using the ng-show.
Is it a good practice to add a "display" property directly on my items to show or hide them in the UI?
Edit: If someone could point me to an article explaining that orientation (can't seem to find any).
Yes. This is the right choice. It enables your model to control how items are viewed according to a separately controlled logic. This makes your application scalabale too.
A filter is a better choice in further modeling your logic.
As suggested by other answers, filter is the better choice for your case. Add a property display and then filter based on that property.
<div ng-repeat="item in dataFromServer | filter:{ display: true }">
{{item.name}}
</div>
I have used underscore to create a new property for each object
https://jsfiddle.net/k8u3c8t7/
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.
I have very big form (~500 controls) and want to integrate AngularJS on it. I have one problem, when I'm setting ng-model property it resets my value property.
Is there any way to automatically set model values from input values properties (textareas and selects), without messing with controller code?
You can use "ng-init"
<input ng-model="data.instructions" ng-init="data.instructions='bla bla'">
But still, the recommended way is using a controller.
Hope it helps.
I am looking for a very simple example where e.g. there is a two way binding between span text and an input element using Backbone.js and Rivets.js. Perhaps there is one in the Rivets.js docs, but I can't find it. Any help please?
Assuming that you mean a two-way binding (model-to-view and view-to-model) on an input element and a one-way binding (model-to-view) on a span element, then the following view will do what you describe.
<div id="user-view">
<span>{ user:name }</span>
<input rv-value="user:name">
</div>
Here is a fiddle that demonstrates things in action. It includes a Backbone adapter on the : interface and shows how to bind a model to the view (this is just a more trivial example of what is already shown on the homepage).
I recommend that you use：
https://github.com/theironcook/Backbone.ModelBinder
It can satisfy the two-way binding between the demand of all the view and model。
This is what I do nested view binding example：
http://files.cnblogs.com/justinw/Nested_Model_bi_Binding.zip