a backend defined datatypes, which I should render dynamically in angularjs. The backend might define "sex is enumeration, values male and female".
{
'name': 'sex',
'type': 'enum',
'options': ['female','male'],
'wert': 'male'
}
I can quite easily use a select:
<select ng-model="wert" ng-options="value for ( key,value) in options"></select>
But would prefer a button group like
<div class="btn-group">
<label class="btn btn-primary" ng-model="wert" uib-btn-radio="'male'">male</label>
<label class="btn btn-primary" ng-model="wert" uib-btn-radio="'female'">female</label>
</div>
Now I try to have those buttons dynamic...
<div class="btn-group" ng-repeat='option in options'>
<label class="btn btn-primary" ng-model="wert" uib-btn-radio="'{{option}}'">{{option}}</label>
</div>
And I fail. Looked quite straight forward to me. But why does the dynamic button group not work out? Seems not to be connected to my scope?
I'm probably not grasping some fundamental angular concept here?
The code is to be put in a directive, but that's probably not related to the issue.
Any help would be greatly appreciated.
You should not use {{}} interpolation with the values
<div class="btn-group" ng-repeat='option in options'>
<label class="btn btn-primary" ng-model="model.wert" uib-btn-radio="option">{{option}}</label>
</div>
Other thing I wanted to point out is, you need to define model to follow Dot Ruleso that will ensure binding will work in correct way. The reason behind you should go for Dot Rule is, you have defined ng-model inside ng-repeat, so that would not available in outer context(ng-repeat does create new child scope which is prototypically inherited from it current running controller).
Demo here
Related
How can I validate one ng-include at a time,
<form name="myform" ng-submit="validateData()" novalidate="novalidate">
<div>
<div ng-include="customtemplate"></div>
</div>
<div class="center">
<input class="btn buttonNewRequest" type="submit" id="submit" value="Submit" />
<input class="btn buttonNewRequest" type="button" id="reset" value="Reset" />
</div>
</form>
I am using the two different templates dynamically using customtemplate, my problem is here, it's validating both template same time.
So how to restrict one template for validation at a time.
Please suggest a better way, I have no clue about this.
Try the example section here: https://docs.angularjs.org/api/ng/directive/ngInclude
Did you try the ng-if directive to conditionally check one template at a time.
Also please include some example code where exactly facing this issue.
you should include file conditionaly use ng-if propoery it will work
I am trying to make a search function which works if I put in the query params into my URL directly but I don't know how to make it work so that it picks it up from the search box and executes it. I have used ng-model to map the text itself to the controller which works but the execution isn't working.
The navbar form:
<form ng-submit="doSearch()" class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="col-md-offset-4 input-group" style="display:table;">
<input ng-model="search.text" class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
<span class="input-group-addon" style="width:1%;">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
</div>
By the way, my doSearch() function works just fine when I run it manually and so is the search itself. I have also validated that search.text comes through. I guess what I am asking is how do I make the icon (glyphicon-search) execute ng-submit="doSearch()" when the user clicks on it or presses enter.
Sorry if this is very obvious. I was always more on the backend side of things so am sorta new to HTML and Angular.
Thanks
You could place the icon inside a <button> element instead of <span>, tweak a bit of css to integrate it to the form field.
In regards to trigger search on enter, with jQuery something like this could be used:
$('input').keypress(function (e) {
var key = e.which;
if(key == 13) // the enter key code
{
doSearch();
}
});
did you try using <button type="submit"> before your search icon
<span class="glyphicon glyphicon-search"></span>
to specify that clicking on that button is equivalent to a submit event for that form.
So this worked in the end. First, the proper HTML which works:
<form ng-submit="doSearch()" class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="col-md-offset-4 input-group" style="display:table;">
<input ng-model="search.text" class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
<span ng-click="doSearch()" class="input-group-addon" style="width:1%;">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
</div>
</form>
Furthermore, there was an issue with the view not connecting to the controller. Actually, let me rephrase that - it was connecting to the controller but only when the whole page loaded and for my test, I had a console.log('I have loaded') put in there. So when I saw "I have loaded", I thought my controller was invoked properly.
However, the doSearch() was in the controller which was connecting via angular routing, so the ng-View was not connecting to the right controller.
I am not sure if this means anything to anyone but I am writing this in case someone else comes across an issue like mine.
So just to summarise the issue was not with the HTML as I originally thought. ng-submit (for form submission when pressing enter) and ng-click (for clicking the glyphicon) does the trick.
I am working with AngularUI Datepicker.I have seprate partial views each having ng-repeat .There I am using AngularUI-Bootstrap-Datepickers and it is making page load really slow.
I followed this answer:
Many UI-Bootstrap-Datepickers on page loads very slowly - can I use a single instance and move element?
But I got few other issues.In this approach we are using separate ng-if to switch from span to textbox. But switching between them is taking considerable amount of time which make it visible to user that we are playing with textboxes.(check Image
http://i.stack.imgur.com/YxZXQ.png )
I also followed this : https://github.com/angular-ui/bootstrap/pull/3666/commits
But I am unable to integrate the changes and successfully run the datepicker.
Is there any reliable solution to this issue?
Many UI-Bootstrap-Datepickers on page loads very slowly - can I use a single instance and move element?
<p class="input-group">
<span class="form-control" ng-if="!date.opened1">{{date.data1|date:format}}</span>
<input type="text" class="form-control"
ng-if="date.opened1" datepicker-popup="{{format}}" ng-model="date.data1"
is-open="date.opened1"
datepicker-options="dateOptions"
close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, date,1)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
code
$scope.open = function($event,date,i) {
$event.preventDefault();
$event.stopPropagation();
date['opened'+i] = !date['opened'+i];
};
Plunkr link
I am creating a form for each item in my $scope. ng-model is not linking with the data on my form submit.
<li ng-repeat="item in favourites">
<form ng-submit="DeleteFavourite()" class="form-horizontal" id="frmSpec">
<input ng-model="item.Description"/>
<input ng-model="item.Refno"/>
<button type="submit"class="btn">{{item.Description}}
<span class="glyphicon glyphicon-remove"></span>
</button>
</form>
</li>
The issue is very closely related to the comment by #DavidBeech . In an angular controller the scope is seen as a hierarchy object.
So for example if you have the following:
<div ng-controller="SomeCtrl">
<li ng-repeat="item in favourites">
<form ng-submit="DeleteFavourite()" class="form-horizonatal" id="frmSpec">
<input ng-model="item.Description"/>
<input ng-model="item.Refno"/>
<button type="submit"class="btn">{{item.Description}}
<span class="glyphicon glyphicon-remove"></span>
</button>
</form>
</li>
</div>
When that controller is injected into the div and that new scope instance is created it only sees what is at that level and the scopes of it's parents. It has no knowledge of its children's scopes. Therefore, when you call DeleteFavourite() since it is a method attached to the scope of the controller it will not have the context of the ng repeat. So as David stated you will need to do something like DeleteFavorite(item) in order for it to have knowledge of what you are submitting otherwise you will not have knowledge of what item in the iteration you are submitting.
Feel free to comment if you want an example and I can put together a fiddle with an example of scope inheritance.
<select class="form-control" data-ng-options="t.name for t in vm.types"
data-ng-model="vm.object.type"></select>
The code above obviously displays a basic dropdown in a standard form-control manner. I've been trying to figure out how to convert this to a button style dropdown using Angular's ui-bootstrap directives but can't seem to get anywhere. Has anyone tried this?
I hope you already found the answer, but maybe someone else will find this useful. The previous answer refers to a common drop down not a button drop down. Here is an example, but without the benefits of hg-option while I didn't use a select but a button.
<div class="input-group">
<div class="input-group-btn" ng-class='{open: open}'>
<button class="btn dropdown-toggle"
data-toggle="dropdown"
ng-click='open=!open'>
Action<span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="choice in choices"
ng-click="setChoiceIndex($index);$parent.open =!$parent.open">
{{choice}}</li>
</ul>
</div>
<input type="text" ng-model="choices[index]" class="form-control">
</div>
where choices is an array of strings that will be displayed in the drop down and index is another variable in the controller scope that will reflect the selected choice.
I have created a basic demo of a drop down using angular bootstrap..
Visit :http://plnkr.co/edit/Mfw5zABqPTgLL4DAgAA3?p=preview
Hope this is what your are looking for.