My question is about generating dynamic html content with ng-repeat that contains multiple ng-model instances stored in an array.
But I get a syntax error for {{ in ng-model.
Is it possible somehow?
<div class="col-xs-12 col-md-12 col-sm-12 col-lg-12" ng-repeat="(key, antecedente) in antecedentes" >
<div class="form-group">
<label class="col-md-3">{{antecedente.name}}</label>
<div class="col-md-1"> Si <input ng-model="historia.antecedentes[{{key}}].seleccionado" type="radio" value="S"></div>
<div class="col-md-1"> No <input ng-model="historia.antecedentes[{{key}}].seleccionado" type="radio" value="N"></div>
<div class="col-md-2">Observaciones </div>
<div class="col-md-5"><input ng-model="historia.antecedentes[{{key}}].observacion" class="form-control" type="text" value=""></div>
</div>
</div>
you dont need curly braces around key, ng-model evaluates the expression/variable itself
ng-model="historia.antecedentes[key].seleccionado"
Everything you have a tag with ng in front of it, you don't have to have any curly braces, ever (except with ngSrc, wich whole purpose is to use curly braces inside a src). That's a good memory rule I think.
Related
I have a modal with with a div that consists of:
1. One text input.
2. Two drop downs.
I also have buttons that Add and Remove the above mentioned div as need be, and I am achieving the same in the following way :
$scope.data = [{}];
1.Adding:
$scope.addRow = function(){
$scope.data.push({});
}
}
Removing:
$scope.removeRow = function(){
$scope.data.splice($scope.data.length-1,1);
}
This works well, it adds and removes the div appropriately.
This is my HTML:
<div class="row" ng-repeat="count in data">
<div class="col-lg-4 col-md-3 col-xs-6 col-sm-6">
<input type="text" ng-model="inputNumber" class="form-control" ng-required="true" autofocus="true"/>
</div>
<div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
<div class="controls">
<select class="form-control" ng-options="item.Data for item in items" ng-model="init"></select>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-6 col-sm-6">
<div class="controls">
<select class="form-control" ng-options="item for item in allItems" ng-model="getNewData"></select>
</div>
</div>
</div>
It basically consists of the text input field and two dropdowns with certain options.
My question here is, as and when I 'add' or 'remove' this div with the values that I input - How can I get all of the inputted values in my controller function and store it in an array?
A console.log on angular.toJson($scope.data) gives me an empty output.
What am I missing, and how can I get the values of all the rows for each of my fields?
Your data seems to be coming from all over the map. So it's hard to tell what is going on here. Your outer ng-repeat is repeating over count in data, but you never refer to that again. Your text input isn't even bound to an ng-model at all, so I'm not sure what the point of requiring it is.
What I'd suggest is create an array of objects that have properties that drive your two selects and one input. So maybe like this:
//these names are coming from your code. I know they make no sense, but there's not enough in your code to figure out what the sensible names would be
$scope.data = [
{id:1, inputVal:'', init:'', getNewData:''},
{id:2, inputVal:'', init:'', getNewData:''}
]
In this case, you'll probably want to add a "track by" since these are empty objects. I assume your real objects have real values they can use, but I don't have the information to put anything in there.
Then you can set your ng-model on the text input to count.inputVal, the first select to count.init, and the second select to count.getNewData. Your delete button would point to the entire selected item from your $scope.data collection, so all its properties would be right there.
According to your comment above. This maybe your solution;
<div class="row" ng-repeat="count in data">
<div class="col-lg-4 col-md-3 col-xs-6 col-sm-6">
<input type="text" class="form-control" ng-required="true" autofocus="true" ng-model="textInput"/>
</div>
<div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
<div class="controls">
<select class="form-control" ng-options="item.Data for item in count.data" ng-model="init"></select>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-6 col-sm-6">
<div class="controls">
<select class="form-control" ng-options="item for item in count" ng-model="getNewData"></select>
</div>
</div>
</div>
You can access "textInput" via "$scope.textInput" in your controller. Also you can see all the objects in your "item.Data" by repeating in "count.data" or which ever the field name in your object. But be sure that data field in count object is an Array. In your 3rd div, you access it with "$scope.getNewData" in your controller. But you must be repeating in count object and count object should be an Array.I hope it works.
I need to convert below code to dynamic code using angular directive or any other angular way.
one Directive:
<view-partial></view-partial>
view-partial.html
<div id="layoutFormation">
<div ng-repeat="container in layoutJSON.layoutInfo.containers" class="row form-container x_panel tile">
<div class="x_title nopadding"><label class="container-header">{{(container.headerText == " ") ? "" : container.headerText }} </label></div>
<div number-of-rows="{{ container.table.numOfRows }}" number-of-columns="{{ container.table.numOfColumns }}" class="x_content col-md-12 col-xs-12 collapse-expand">
<div ng-repeat="columnNumber in range(container.table.numOfColumns)" class="col-lg-6 col-md-6 col-sm-6 col-xs-12 column">
<binding-control-block ng-repeat="rowNumber in range(container.table.numOfRows)" row-number="{{rowNumber}}" column-number="{{columnNumber}}" style='margin-bottom: 12px;' />
</div>
</div>
</div>
</div>
Here binding-control-block is another directive that directive with binding code already i'm doing in dynamically. Only thing the above partial page also i need to convert dynamically. I think I have to add all the above view-partial code in another directive. just i need any example or idea how to create directive with binding expression. Please any one help me to achieve this. If any clarification need please message me. Thanks in advance.
I would like to conditionally hide/display part of a htmlbars template, however I would not like it to be removed from the DOM. If I use the {{if}} block helper it removes it from the DOM. I manage to accomplish this changing the class name with an inline {{if}} helper. I would like to know to if there is a better way to accomplish this?
<div class="{{if (not isEnglishSelected) 'hidden'}} {{if isEnglishSelected 'show'}}">
<div class="form-group">
<label class="col-sm-2 col-md-3 control-label" for="name_en">{{t 'label.name'}}</label>
<div class="col-sm-10 col-md-9">
{{input type="text" class="form-control" id="name_en" value=model.name_en autofocus=true}}
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-md-3 control-label" for="description_en">{{t 'label.description'}}</label>
<div class="col-sm-10 col-md-9">
{{textarea class="form-control" id="description_en" value=model.description_en rows="5"}}
</div>
</div>
<div class="form-group {{if (not isEnglishSelected) 'show'}} {{if isEnglishSelected 'hidden'}}">
<label class="col-sm-2 col-md-3 control-label" for="description_fr">{{t 'label.description'}}</label>
<div class="col-sm-10 col-md-9">
{{#if isEnglishSelected}}
{{textarea class="form-control"
id="description_fr" value=model.description_en rows="5"}}
{{else}}
{{textarea class="form-control" id="description_fr" value=model.description_fr rows="5"}}
{{/if}}
</div>
</div>
</div>
No, there isn't a better way than using a class to hide it. If you want it to remain in DOM, your class needs to have display:block in its definition. If you want it to be invisible but still retain its dimensions, you need visibility: hidden.
Every view/component in ember is fitted with an isVisible flag that can be toggled. This will do exactly what you you are looking for.
ex.
{{textarea class="form-control" id="description_fr" value=model.description_en rows="5" isVisible=isEnglishSelected}}
{{textarea class="form-control" id="description_fr" value=model.description_fr rows="5" isVisible=isEnglishNotSelected}}
However in this case, I would recommend you push the logic for determining your value up into the controller and eliminate the need for duplication in your view.
As a side note, you can always convert an element to a component/view and apply the isVisible flag as well (in reference to your outermost div with the inline conditional)
Basically, in my template I have the following code:
<div class="normal-padding">
Quicksearch: <input type="text" id="searchBox"/>
</div>
<div class="ui divider"></div>
{{#each getChildren}}
<div class="normal-padding">
<div class="ui two column grid">
<div class="column" style="width:60px;">
<div class="squaredOne">
<input type="checkbox" value="{{_id.toHexString}}" class="selectedChild" id="{{_id.toHexString}}" >
<label for="{{_id.toHexString}}"></label>
</div>
</div>
<div class="column">
<label for="{{_id.toHexString}}">{{firstname}} {{lastname}}</label>
</div>
</div>
</div>
{{/each}}
Where getChildren is the data coming from mongo.
My question is this:
How can I use what's being typed in input#searchBox to add/remove members from the getChildren helper?
Example:
Typing "ar", will list only the records that start with "ar".
I can figure out the regex required, I'm just not sure how to do this in meteor the correct way. I especially want to stay away from manually manipulating the DOM.
I've tried some filtering packages, but they all query the database again, where I just want the data that's already in the client/browser to be changed.
In other words, not send a query down the wire again.
Thanks!
I am implementing a control to display a list of comments, with AngularJS + Bootstrap.
It's something like this:
<div class="comments">
<div ng-repeat="(id, comment) in person.comments" class="row">
<div class="form-group">
<div class="col-xs-12">
<div class="input-group">
<span class="input-group-addon vertical-align-top">
<div><i>Date:</i> {{ comment.date }}</div>
<div><i>By:</i> {{ comment.author }}</div>
</span>
<div class="form-control form-control-content">
{{ comment.content }}
</div>
</div>
</div>
</div>
</div>
</div>
Everything's o.k..
The problem is: comment.content is HTML data (for example it contains line-breaks, hyperlinks, style-formatting, ...). By default HTML is rendered as plain text.
The question is: how do I display data as HTML inside a div?
You can use ng-bind-html.
<div class="form-control form-control-content" ng-bind-html="comment.content"></div>
If you want {{comment.content}} to be interpreted as HTML, you need to look at ngBindHtml directive.
So you'd need to modify it:
<div ng-bind-html="comment.content" class="form-control form-control-content"></div>
You'll have to add $sanitize into your project dependencies, as is noted in the ngBindHtml doc link above.