I have ng-table with the hidden columns feature. It has a basic checkbox as the toggle. I designed it to look a little nicer but I cant get it to work.
plunkr
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="checkbox" ng-model="column.visible"> <span class="glyphicon glyphicon-check"></span>
</label>
</div>
It's because of Bootstrap's Button plugin.
Are you using Bootstrap at all for this? I just removed Bootstrap's javascript file and it worked.
If you need Bootstrap, you either need to make a custom build of it or remove the data-toggle="buttons" from your div and style it yourself.
Related
I currently have the following html which consists of 3 buttons (1 hidden). I have a button which triggers a hidden button which is used to select a file to upload and I have a third button which is used to call upload and send the data to the server. I would like to change this so that after selecting a file, the file is automatically uploaded. I am having issues triggering the upload button when a file is selected (and then I will hide the upload button once I have the automatic upload functionality working). I have tried using the onchange event to accomplish this but with no success
<div class="col-xs-12" style="margin-top:250px">
<div class="col-xs-4" align="center" style="padding-left:290px">
<button class="btn btn-default" ng-click="newProject()">New Project</button>
</div>
<form class="col-xs-4" align="center"
ng-controller="CsvImportController" style="display: inline-block;padding-left:200px" id="csvForm">
<a href="#" class="btn btn-default btn-file"
onclick="document.getElementById('fileBrowser').click(); return false;">Select
CSV File</a>
<button id="submitCsv" class="btn btn-default" ng-click="upload()">Upload</button>
</form>
<div class="col-xs-4" align="center" style="padding-left:110px">
<a class="btn btn-default">Browse
Projects</a>
</div>
</div>
<br>
<br>
<input id="fileBrowser" style="visibility: hidden;"
class="btn btn-default btn-file" type="file" id="file" file-input="files" onchange="document.getElementById('submitCsv').click(); return false;"/>
See this answer for some libraries that will handle all the upload functionality for you as well as provide some other nice features.
onchange will not work on <input type="file"/> as it will not register a change when you select a file. ng-click will not work also as it will trigger when the input is first clicked, not when a file is selected.
You also can't apply any styles to an <input type="file" /> either, so I get what you're trying to do here, but <input type="file" /> does not offer much functionality which is really unfortunate.
You also have 2 ids defined on your hidden input. Make sure there is only one id so that you can call it correctly.
Hi I have the following html:
<div class="col-sm-20">
<div class="btn-group btn-group-justified">
<label class="btn btn-primary demo-review" ng-model="demo.title" btn-radio="'{{::demo.demoinfo.title}}'">
{{::demo.demoinfo.title}}
<i class="check-circle btn-success" aria-hidden="false" ng-if="'0' == '0'"></i>
</label>
<label class="btn btn-primary demo-review " ng-model="demo.title" btn-radio="'{{::demo.demoform.title}}'">
{{::demo.demoform.title}}
<i class="check-circle btn-success" aria-hidden="false" ng-if="'1' == '0'"></i>
</label>
</div>
</div>
Now in the above,the labels are added with a class called "active" whenever a particular label is selected; i.e., this class 'active' is dynamically added.
And I want to show/hide the <i class="check-circle btn-success" aria-hidden="false" ng-if=" '1' == '0' "> based on whether the label has class 'select' or not. So basicallly I want to update my ng-if based on the existence of the class 'active'.
I think I am pretty close:
<label class="btn btn-primary demo-review" ng-model="demo.title" btn-radio="'{{::demo.demoinfo.title}}'">{{::demo.demoinfo.title}}<i class="amds-check-circle pull-right-sm " aria-hidden="false" ng-if=" angular.element($this).hasClass('active') "></i></label>
Basically in the ng-if I am trying to check if the label element has class 'active'.I might be little away, may be syntax is wrong.Can anyone pls help?
Is it possible?
Any help will be highly appreciated.
Thanks in advance.
I think what you actually want to do is conditionally apply a class to your element(s).
Using ng-class, you can do this:
<label ng-class="{ 'selected': demo.isSelected }">
<i ng-class="{ 'check-circle': demo.isSelected }" class="btn-success" aria-hidden="false"></i>
</label>
In this case, only if your model demo.isSelected is true, the selected class will be applied to the label and also the check-circle class applied to the <i> element.
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 '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
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.