I have a repeater setup that looks like this
<table class="table table-condensed">
<tr ng-repeat="m in resp.AvailableTemplates">
<td>
<input type="checkbox" ng-model="m.Selected" />
<span ng-bind-html="m.MessageText"></span>
</td>
</tr>
</table>
Where m.MessageText is a string that looks something like
Hello <input type='text' value=''/>!, thanks for the <input type='text' value=''/>
The user will see a list of template phrases, check off the desired phrases, fill in the text areas, and submit which sends an email filled in with the phrases provided.
By using ng-bind-html, the output looks as it should. But when using ng-model, the output doesn't display the html. How can I bind this information so it renders as proper html, but also allows me to gather the information provided by the user?
Try this:
<span ng-bind-html="{{m.MessageText}}"></span>
Guess you need the provided html
Hello <input type='text' value=''/>!, thanks for the <input type='text' value=''/>
to be binded to your angular model, something like
Hello <input type='text' value='' ng-model="m.messageContentOne"/>!, thanks for the <input type='text' value='' ng-model="m.messageContentTwo"/>
BUT you cant render HTML that contains angular bindings with ng-bind-html (well, you can, but the bindings will not work)
To make it work, you need to bind AND COMPILE the HTML to make the angular bindings work.
To do this you can use the custom directive bind-html-compile, from this link
https://github.com/incuna/angular-bind-html-compile
You can also do it yourself, you just need to create a directive that compiles the directive element with the angular $compile service
$compile(element.contents())(scope);
Hope it helps.
Related
I am using ng-repeat in angularjs to display several checkboxes.
<div class="checkbox" ng-repeat="subject in priceinformation.subjects">
<label>
<input type="checkbox" ng-model="priceinformation.subscriptioninfo.subject.name"> {{subject.name}}
</label>
</div>
The problem is all the checkboxes are using the same model, hence if I check one, all are checked. I want to do it in a way that the model can resolve to different values. e.g.
ng-model="priceinformation.subscriptioninfo.subject.{{subject.name}}"
{{subject.name}} should resolve to something like English, History etc, hence a different model for each checkbox.
But ng-model="priceinformation.subscriptioninfo.subject.{{subject.name}}" is giving an error.
Note: {{subject.name}} is resolving correctly used elsewhere, and 'priceinformation.subscriptioninfo.subject' is working correctly.
Use [] instead of .
ng-model="priceinformation.subscriptioninfo[subject.name]"
Plnkr Demo
Script
$scope.priceinformation ={};
$scope.priceinformation.subjects = [{"name":"English"},{"name":"History"},{"name":"Maths"}];
$scope.priceinformation.subscriptioninfo ={};
<div ng-repeat="item in checks">
<input type="checkbox" ng-model="item.checked">{{item.name}}
</div>
See Plunkr
I would like to iterate over an array in AngularJS like this:
var languages = ['en', 'es', 'fr'];
To generate something like this:
<input type="text" ng-model="mymodel.en" placeholder="Name (EN)">
<input type="text" ng-model="mymodel.es" placeholder="Name (ES)">
<input type="text" ng-model="mymodel.fr" placeholder="Name (FR)">
I have tried this:
<div ng-repeat="language in languages">
<input type="text" ng-model="mymodel.{{language}}" placeholder="Name ({{language | uppercase}})">
</div>
But throws an error:
"Syntax Error: Token '{' is an unexpected token at column ..."
How should I perform this loop?
Use mymodel[language] instead of mymodel.{{language}}
<div ng-repeat="language in languages">
<input type="text" ng-model="mymodel[language]" placeholder="Name ({{language | uppercase}})">
</div>
plnkr
See the plnkr, and start typing in any of the input fields to see the model changes.
you cantry something like this,
<input type="text" ng-model="mymodel[language]" ...
You shouldn't use {{}} notation inside ng-model here you can refer to your property in the mymodel object.
But it seems that you are trying to get binding via model somehow for your inputs. It's not gonna work in your case because you need to init mg-model directives.
For catching changed in your model from dynamically generated you need to compile used directives using $compile service.
Here you can check out sample. I googled it but I've solved similar problem in similar way.
I am trying to use AngularJS Validation in order to validate a simple form, however I was having troubles getting my ng-class to show the correct class based off whether or not the input was dirty or not. Then when I looked at the actual HTML of the page, the <form> tags are not even in the document at all!
<form novalidate name="infoForm">
<p>To start, provide some basic information about the project.</p>
<ul class="ulFormGeneral">
<li>
<label>Company name</label>
<input id="CompanyName" ng-class="{ cvError : infoForm.CompanyName.$dirty }" ng-model="form.CompanyName" name="CompanyName" maxlength="100" type="text" required />
</li>
</ul>
</form>
I want the cvError class to be added to this input if it is dirty, but nothing happens when I look at this in the browser. What am I doing wrong that is causing the <form> to just leave the DOM and then not work with my Angular expressions?
Welcome to the Angular world, no forms required! Here, the model is king. It looks like the problem is the ng-model and ng-class are point at different places.
Point everything at form.CompanyName (assuming that is the model name is form in the $scope):
<input id="CompanyName" ng-class="{ cvError : form.CompanyName.$dirty }" ng-model="form.CompanyName" name="CompanyName" maxlength="100" type="text" required />
The ng-model binds to the $scope. When you change the input field, it is automatically updated in the $scope. No form is needed or hitting a submit button to get the data. The $scope is updated with each key stroke.
The controller should do the work of figuring out what to do with the changes in the model. For example, you can add an ng-click to a button that fires a function defined by the controller to save the model.
I have a form that generates some fields using ng-repeat. I want to attach each independent field to set validity in case it is left empty. Is there a way to do this?
Thanks!
You need to use ng-form with your ng-repeat. I'd update your example, but you didn't give me one... so the idea is something like this:
<form name="myForm">
<div ng-repeat="item in items" ng-form="repeatForm">
<input type="text" name="foo" ng-model="item.foo" required/>
<span ng-show="repeatForm.foo.$error.required">required</span>
</div>
</form>
If you needed to access 'setValidity' on the model for some reason, you'd probably have to pass repeatForm.foo to a function either on your controller or on your scope. like ng-click="myWeirdValidationFunction(repeatForm.foo)". There's probably not much of a use case for this though.
My task is: group of checkboxes must be checked(all), if checkbox-parent has been checked. Sure, using Angular. OK, what am I doing:
My parent checkbox is gettring the ng-model directive:
<input type="checkbox" ng-model="checked" ng-true-value="checked" ng-false-value="" id=""/> {{filterValue.title}}
Sub-checkboxes are getting the next:
<input type="checkbox" {{checked}} id=""/> {{subNodeValue}}
Trying: no check in the last case, however {{checked}} calculates successfully out of the <checkbox>.
What am I doing wrong ?
UPD:
Sub-checkboxes are created by this:
<ul id="id" class="groupList">
<li ng-repeat="subNodeValue in filterValue.subNodesValues">
<input type="checkbox" {{checked}} id=""/> {{subNodeValue}} {{checked}}
</li>
</ul>
Use the ngChecked directive instead of doing it that way (http://docs.angularjs.org/api/ng.directive:ngChecked). They have a master/slave checkbox example on there too
You can't use {{}} alone inside an element. Use ng-checked=checked instead.
Here is a working plunker: http://plnkr.co/edit/vBftwH4MwkeSiC90AltU?p=preview