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)
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.
My requirement is when I clicked on start button one of the Div content must be changed to "in Progress" and the value="start" must changed to value="Complete", now when I click on "complete button" the div content must changed to Completed and this complete button must be hidden.
I can achieved some of the requirement by Jquery, but I want to implement it by Angular JS. First of all I should know How can I read button value="start" in controller of angular Js. Below is my code.
<div class="row" style="margin:0% 20% 2% 10%;">
<div class="col-lg-2 col-sm-12 text-center">
18/5/2015
</div>
<div class="col-lg-2 col-sm-12 text-center">
eureQa
</div>
<div class="col-lg-2 col-sm-12 text-center">
Int-1
</div>
<div class="col-lg-2 col-sm-12 text-center" id="status">
Pending
</div>
<div class="col-lg-2 col-sm-12 text-center">
</div>
<div class="col-lg-1 col-sm-12 text-center" >
</div>
</div>
Use ng-click to set a scope variable or fire a controller function which sets a scope variable that is watched by ng-show. ng-show and ng-hide are responsible for showing/hiding dom elements.
$scope.buttonName = 'start';
onload Declare a value for button and in trigger change value for the
{{buttonName}}
$scope.buttonName = 'tempName';
You don't need to set the value at all. ng-model takes care of it,
Add $scope.value and replace value when you required
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.
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.
Here I have a form in modal window and it looks like this:
Here you can see that input fields are really small...
Also the same code but not in modal widnow: http://jsbin.com/OJAnaji/37/edit
Works fine.
What is the problem here?
Why can't I show the form like on my example without modal window?
How can I solve it?
I tried to remove div class=col-md-4, but again it doesn't work.
generated html is like this.
<div class="form-group">
<label class="col-md-4 control-label" for="appendedtext"></label>
<div class="col-md-2">
<div class="input-group">
<input id="appendedtext" name="appendedtext" class="form-control" placeholder="Ar" type="text">
<span class="input-group-addon">Ar</span>
</div>
</div>
</div>
try to change col-md-2 to col-md-4 or just remove it