I have an html element (div)
I append anther html element like (textarea) to to this (div), I want to bind the value of the added element to ng-model which is an area
.html file
<div id="new-view{{$index}}"></div>
.js file
var parent = $('#new-view' + controllerIndex);
var question = angular.element('<textarea data-ng-model="self.array['+Index+'].question"></textarea>');
parent.append(question);
How to I bind what the user will write inside this text area to the array?
You can try another approach with ng-repeat directive. Operate on your data. And angular 2-way binding will update your interface.
Little example: http://jsfiddle.net/joshdmiller/hb7lu/
<div >
<textarea ng-repeat="q in questions" ng-model="q.text"></textarea>
</div>
Related
I am working on project with Angular 12 and I have an HTML response I want to display. I want to bind innerHtml of div to variable value
I use this syntax {{value}}
You should use [innerHTML] property binding to your element , like this :
<div [innerHTML]="response"></div>
In my angular component ts file I have a model, with a property whose value is html formatted text.
The text is displayed in the UI using inner html property of a div in my component’s .html file.
The div is made editable by setting the editable property .
Code snippet :
<div id="requestBody" contenteditable="true"
*ngIf="selectedReqTab==='reqBody'" [innerHTML]="formatJson(requestBody)"></div>
Here formatJson returns the html formatted JSON text.
The issue :
The changes made in the text are not getting reflected in the corresponding model, even if we have 2 way data binding using ngModel.
<div id="requestBody" contenteditable="true"
*ngIf="selectedReqTab==='reqBody'" [(ngModel)]=”requestBody”
[innerHTML]="formatJson(requestBody)"></div>
What am I doing wrong here ? could you please suggest.
contenteditable isn't an input, and two way binding works on inputs.
You have to update your model through input events, as shown here
<p (input)="updateModel(model.innerText)" #model contenteditable>{{ name }}</p>
<div ng-repeat="item in items | limitTo:$parent.limit=($parent.limit||5)">
...
<a ng-if="$last" ng-bind="$parent.limit===Infinity ? 'Read Less':'Read More'" ng-click="$parent.limit=$parent.limit===Infinity?5:Infinity"></a>
</div>
So the initial limit is only 5 items, and clicking the link changes the text between Read more/Read less. But ngRepeat doesn't pick up on the change and add/remove items. I want ngRepeat to update when I change $parent.limit variable. I'd like to avoid using the controller, if possible.
The ng-repeat directive I believe creates another scope under it for it's child items. So then you would not be talking to the same parent that's referred to in the <div> element. So in your <a> tag you may need to talk to the parent's parent scope.
So try $parent.$parent instead of just $parent within your anchor tag inside of your ng-repeat.
Of course doing this will make the AngularJS gods shed a tear, so I recommend creating a controller or calling a method in your ng-click that will propagate up to the current controller for his template. Then you can move all of that logic outside of your template.
When i use Angular to dynamic change div 's backgroundImage, i find there are two ways to set backgrond-image:
first:
<div style="background:url({{example_expression}})"></div>
the second:
<div ng-style="{backgroundImage: 'url({{example_expression}})'}"></div>
But when i change example_expression, only the first way can dynamically change the backgroundImage.
There is a example in Plunker
What's wrong with ngStyle?
ng-style should not contain {{}} interpolation directive, you could directly access scope variable there. Also backgroundImage should be 'background-image'
Markup
<div ng-style="{'background-image': 'url('+ example_expression+')'}"></div>
Demo Plunkr
I am working on converting a html to angular js and one of the issue i have is, a button on the page uses ID and based of that id there is a div class that runs set of texts to be displayed accordingly.
Code that we have is something like this.
Continue
From the HTML page when the user clicks on the button continue... below code will be executed.
<div class="ContinueClicked">
text.......
</div>
I am trying to figure out a way to see how i can make it work with angular js. So when the user is clicking on the continue button, the page should display the content in div continueClicked. Should i be using any directive here? please help.
You have to adhere to AngularJS principles and conventions. Angular uses Directives for most of the DOM transformations, and Bindings for constant DOM and Model updates (two-way data bindings.)
In your case scenario you might want to have the following DOM elements (inside a Controller inside an ng-app Module, see AngularJS docs):
<!-- The button with the event handler as ng-click directive -->
<button ng-click="isContinue = true">Show continue content</button>
<!-- The content wrap with ng-show directive -->
<div class="ContinueClicked" ng-init="isContinue = false" ng-show="isContinue">
My content to be shown
</div>
You can also read and practice basic concepts following the Angular Tutorial.