i 'm using jquery plugin with angular , the problem is plugin works without ng-switch but doesn't work with ng-switch .
Any idea ?Thanks in advance
Demo
<ng-switch on="data">
<div ng-switch-when="true" class="form-group">
<label class="sr-only" for="exampleInput3">تاریخ</label>
<div class="input-group">
<div class="input-group-addon" data-MdDateTimePicker="true" data-trigger="click" data-targetselector="#exampleInput3">
<span class="glyphicon glyphicon-calendar"></span>
</div>
<input type="text" class="form-control" id="exampleInput3" placeholder="تاریخ" data-MdDateTimePicker="true" data-placement="right" />
</div>
</div>
<div class="leftWrapper" ng-switch-default>
say Hi
</div>
</ng-switch>
The reason why it doesn't work is Jquery plugin has no idea to where to send click event (in your case) when ng-if recreates DOM. And for sure it doesn't trigger digest cycle.
To make it work you can do it by two ways:
or create directive for jQuery plugin (for me more appropriate)
or change to ng-show/hide see DEMO. ngShow directive shows or hides the given HTML element on CSS level
For DOCS see ng-if
Related
This question already has answers here:
What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
(3 answers)
Closed 5 years ago.
I am trying to get data in angular js controller using angularjs form submission ng-submit="method"
Normally all data I can see in controller using alert(). Now the problem is if I use ng-if condition inside of angular form then this specific field value show undefined. How can I solve this?
<div class="row" id="BarcodeDiv">
<span ng-model="br" ng-init="br=1" id="br" style="display:none;"><i class="fa fa-etsy" aria-hidden="true"></i></span>
<span ng-if="br==2">
<div class="col-sm-6">
<label>Serial Number</label> <span ng-click="barCodeChanger()" style="cursor:pointer;"><i class="icon-rotate-cw3"></i></i></span>
<input type="text" name="Barcode" ng-model="Barcode1" class="form-control" placeholder="123">
</div>
<div class="col-sm-3">
<label>From</label>
<input type="text" name="StartFrom" ng-model="StartFrom" id="StartFrom" class="form-control" placeholder="4" style="padding:5px;">
</div>
<div class="col-sm-3">
<label>To</label>
<input type="text" name="ToEnd" ng-model="ToEnd" id="ToEnd" class="form-control" placeholder="9" style="padding:5px;">
</div>
</span>
<span ng-if="br==1">
<div class="col-sm-12">
<label>Serial Number</label> <span ng-click="barCodeChanger()" style="cursor:pointer;"><i class="icon-rotate-ccw3"></i></span>
<input type="text" name="Barcode" ng-model="Barcode" class="form-control" placeholder="123">
</div>
</span>
</div>
Keep in mind that ng-if is scope true so the vars won't necessarily show in your controller. Try replacing ng-if with ng-show. You should see the values.
However, ng-if is more efficient than ng-show.
Another option would be to create object in your controller let's say $scope.submitData = {} and bind Barcode1, ... via this object. So in your controller you would have to initialize `$scope.submitData = {}' and in the view you would reference it as
ng-model='submitData.Button1
I recently updated the Angular UI bootstrap. When page load I am getting this error-
Error: [$compile:tplrt] Template for directive 'uibTypeaheadPopup'
must have exactly one root element.
uib/template/typeahead/typeahead-popup.html
My template file which has the input tag has proper root element.
<div>
<div class="form-row">
<div class="form-cell"><label class="control-label">Cc : </label></div>
<div class="form-cell">
<input name="ccClientInput" type="text" ng-model="asyncSelected"
uib-typeahead="address as address.SearchDisplay for address in clientCcSearch.getClients($viewValue)"
typeahead-loading="loadingLocations"
typeahead-editable="false"
typeahead-wait-ms="300"
placeholder="Search for colleagues"
class="clientcc-search">
<div>
<span ng-repeat="client in CcClients">
<span class="clientcc">
<span class="client-tooltip" tooltip tooltip-contents="createTooltip(client)">{{client.Name}}</span>
<span ng-click="removeClientCC($index)" class="cursor-pointer ccCl">
<i class="icon-remove-on-s"></i>
</span>
</span>
</span>
</div>
</div>
</div>
The problem is that, You have not closed one of the <div> element.
Issue was spelling mistake in the tpls while adding it to grunt.
Thanks,
RZ
I'm new to using AngularJS and UI Bootstrap and I'm trying to add dropdowns dynamically using ng-repeat. The problem is that when any one dropdown is clicked it triggers all of them. I'm guessing I'm doing something really stupid with my code and I would appreciate it if someone could point me in the right direction on how to make this code work:
<div class="form-group" data-ng-repeat="item in ctrl.items">
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="" name="itemDescription" data-ng-model="item.description">
</div>
<div class="col-sm-5">
<div class="input-group">
<input type="tel" class="form-control" placeholder="" name="value" data-ng-model="item.value">
<div class="input-group-btn" dropdown is-open="ctrl.isOpen">
<button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li></li>
</ul>
</div>
</div>
</div>
The problem is that with more than one dropdown, a click results in all dropdowns being triggered and its probably something really easy but I'm having a hard time with it.
Appreciate any help
/Regards Kris
The issue is is-open="ctrl.isOpen". You are binding the opening of all of them with ctrl. It should be bound to something distinct for each repeat, i.e. something like is-open="item.isOpen"
I have this Angular.js UI-Bootstrap issue. The typeahead-template-url="typeahead/bind-node.html" is not rendering the expression's {{}} in the typeahead template. I am not sure why. In Chromium debugger, I verified this in element inspector where there are literal {{match}} instead of the expression evaluated.
I also have verified with 'console.log()' that the objects being returned to getNodeLabel($viewValue) are good.
Html:
<input type="text" id="label" name="label" ng-model="$parent.node.id" typeahead-min-length="1"
placeholder="Node Name / Label"
typeahead-template-url="typeahead/bind-node.html" style="width:350px;"
typeahead-editable="false"
typeahead="dropDownItem as dropDownItems.label for dropDownItem in getNodeLabel($viewValue)"
typeahead-loading="loadingNodeLabels" class="form-control" required>
<i ng-show="loadingNodeLabels" class="glyphicon glyphicon-refresh"></i>
typeahead html:
<script type="text/ng-template" id="bind-node.html">
<a>
{{match}}
<span bind-html-unsafe="match.label | typeaheadHighlight:query" class="ng-binding">
<i>{{match.label}}</i>
<h1>{{match}}</h1>
</span>
</a>
</script>
id="bind-node.html" needs to be id="typeahead/bind-node.html"
I am using bootstraps radio buttons inside of an ng-repeat directive. However, the changes are not propagated to the underlying model. This is the code:
Add Item
<div class="alert alert-info">
<div ng-repeat="item in data.list track by $index">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-sm btn-default"><input type="radio" data-ng-model="item.value" value="1">1</label>
<label class="btn btn-sm btn-default"><input type="radio" data-ng-model="item.value" value="2">2</label>
</div> {{ item.value }}
</div>
</div>
The same example is working, as soon as I remove the button group and replace it with ordinary radio buttons like this:
Add Item
<div class="alert alert-info">
<div ng-repeat="item in data2.list track by $index">
<input type="radio" data-ng-model="item.value" value="1">
<input type="radio" data-ng-model="item.value" value="2">
{{ item.value }}
</div>
</div>
I have setup a plunkr: http://plnkr.co/edit/ROLW8lluX6DrM3w2UUlH?p=preview
This line (from your plunker) is the problem:
<script data-require="bootstrap#*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
The Bootstrap JS catches the click event on the wrapping label before AngularJS can register it on the radio input. Removing the bootstrap JS from your code fixes the problem (or at least works around it).
In general, it can become problematic to use the Bootstrap JS together with AngularJS.
Instead, consider using the AngularUI Bootstrap library instead. It also provides implementations for radio inputs masked as buttons, as well as some other Bootstrap JS-related functionality.
The Javascript doesn't actually change the values of the radio buttons; it just toggles the active class of the buttons that mask the radio buttons.
Consider using the button directive from AngularUI Bootstrap.