My function:
$scope.DownloadedUncheck = function (event) {
if (event.target.value === lastChecked) {
delete $scope.$parent.selectedDownloaded
lastChecked = null
} else {
lastChecked = event.target.value
delete $scope.$parent.selectedDownloading
}
};
Here's my plunker : http://plnkr.co/edit/g1t4pludTTIAJYKTToCK?p=preview
I wan't to uncheck radio button after click on it.
My code works with normal radio, but not with ui.bootstrap.
Thanks for asnwers in advance!
I guess this is what you need:
HTML:
<body ng-controller="FirstCtrl">
<label class="btn btn-default" uib-btn-radio="'True'" ng-model="$parent.selectedDownloaded" uncheckable>Downloaded
</label>
<br />
<label class="btn btn-default" uib-btn-radio="'False'" ng-model="$parent.selectedDownloaded" uncheckable>To Download
</label>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="name in name | filter:{Download:selectedDownloaded}">
<td>{{name.Download}}</td>
</tr>
</tbody>
</table>
</body>
Changes:
You don't have to bind a method on click.
Upgrade your bootstrap-tpls lib to ver 2.5.0
Use proper element name for bootstrap radio button. which is uib-btn-radio
Use uncheckable attribute of uib-btn-radio, to make that radio button un-check-able
updated plnkr here
Related
I'm having some issues on adding rows in a table using a button.
here is my HTML(note that i have 2 elements with the same custom directive, sure that works):
<input class="form-control" id="dispatcherPod" ng-model="pod.pod">
<exa-datepicker model="pod.startDate" required="true"disabled="true" min-mode="day"id="podStartDate"
format="yyyy-MM-dd" readonlydata="false"></exa-datepicker>
<exa-datepicker model="pod.endDate" required="true" disabled="true"
min-mode="day" id="podEndDate" format="yyyy-MM-dd"
readonlydata="false"></exa-datepicker>
<button type="button" class="btn btn-primary pull-right"
ng-click="puntualAdd()">{{'PUNTUAL_ADD' | translate}}</button>
here is my js:
$scope.puntualAdd = function (){
if($scope.pod.pod == undefined || $scope.pod.pod == null){
$scope.errorPod=true;
$scope.errorMessage.push("field_required_pod");
}
if($scope.pod.startDate == undefined || $scope.pod.startDate == null){
$scope.errorStartDate=true;
$scope.errorMessage.push("field_required_startDate");
}
if($scope.pod.endDate == undefined || $scope.pod.endDate == null){
$scope.errorEndDate=true;
$scope.errorMessage.push("field_required_endDate");
}
if($scope.errorMessage.length==0){
$scope.puntualSupply={};
$scope.puntualSupply.supply_code=$scope.pod.pod;
$scope.puntualSupply.start_date= $scope.pod.startDate.toString();
$scope.puntualSupply.end_date= $scope.pod.endDate.toString();
$scope.puntualSupply.state= "NULL";
$scope.insSupplies.push($scope.puntualSupply);
}
}
and here is have the table that shows data :
<table class="table" ng-controller="SpotDispatcherController">
<thead>
<tr>
<th class="col-order">{{'POD' | translate}}</th>
<th class="col-order">{{'CUSTOMER_DENOMINATION'| translate}}</th>
<th class="col-order">{{'VAT_NUMBER'| translate}}</th>
<th class="col-order">{{'START_DATE'| translate}}</th>
<th class="col-order">{{'END_DATE'| translate}}</th>
<th class="col-order">{{'STATE'| translate}}</th>
<th class="colf-cmd"></th>
<th class="col-order">{{'ERROR_DESCRIPTION'| translate}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in insSupplies">
<td>{{row.supply_code}}</td>
<td>WIP</td>
<td>WIP</td>
<td>{{row.start_date}}</td>
<td>{{row.end_date}}</td>
<td>{{row.state}}</td>
<td class="colf-cmd">
<div class="form-group">
<div class="form-btn-container text-center">
<button type="button" class="btn btn-primary"
ng-click="deleteRecord()">X</button>
</div>
</div>
</td>
<td>{{row.state}}</td>
</tr>
</tbody>
</table>
Note that I have previous data that is being shown in the table, and I want to add some other, but when I do that, my $scope.insSupplies take the data I wrote in the inputs, but doesn't show that in the table
No errors are given, not even in console, and I'm trying to achieve it without any <a> tag
Here is a plunkr of my code.
EDIT: instead of downvoting, you could tell me how to improve my question
Your issue is that you have ng-controller twice. You only need it once on the <body>. Also, I changed your code so that you're passing in the value you want to use puntualAdd() function. It's better practice and overall makes more sense. Hope that helps!
HTML:
<body ng-controller="SpotDispatcherController">
<ng-form>
<div class="form-inline">
<div class="row">
<div class="form-group">
<label title="POD" for="dispatcherPod">POD</label>
<input class="form-control" id="dispatcherPod" ng-model="pod.pod">
</div>
</div>
</div>
<button type="button" class="btn btn-primary pull-right" ng-click="puntualAdd(pod.pod)">PUNTUAL_ADD</button>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="col-order">POD</th>
<th class="col-order">DENOMINATION</th>
<th class="col-order">VAT_NUMBER</th>
<th class="col-order">STATE</th>
<th class="colf-cmd"></th>
<th class="col-order">ERROR_DESCRIPTION</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in insSupplies">
<td>{{row.supply_code}}</td>
<td>WIP</td>
<td>WIP</td>
<td>{{row.state}}</td>
<td class="colf-cmd">
<div class="form-group">
<div class="form-btn-container text-center">
<button type="button" class="btn btn-primary" ng-click="deleteRecord()">X</button>
</div>
</div>
</td>
<td>{{row.state}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</ng-form>
</body>
JavaScript:
var app = angular.module('plunker', []);
app.controller('SpotDispatcherController', ['$scope',
function($scope) {
$scope.insSupplies = [];
$scope.pod = [];
$scope.puntualAdd = function(input) {
$scope.insSupplies.push({
id: null,
dispatch_id:null,
supply_code: input,
magnitude:null,
stat: "NULL",
state_desc: null,
start_date_val: null,
end_date_val: null,
ext_date: null,
aut_mod: null,
date_mod: null
});
};
}
]);
Working Code: Plunkr
If your code is working fine, and your array "$scope.insSupplies" updated successfully everything should work fine.
Check this answer it might help you: How to add dynamic row to a table using angularjs
Trying to disable button in table. and enable it only when item selected/clicked/activated
button code
<td><a class="btn btn-info" ng-disabled="isDisabled">Edit</a></td>
disabled bool
$scope.isDisabled = false;
trying to enable button only when selected is true
$scope.selectedRow = false; // initialize our variable to null
$scope.setClickedRow = function(index) { //function that sets the value of selectedRow to current index
$scope.selectedRow = index;
$scope.isDisabled = true;
}
any help please?
http://plnkr.co/edit/llmcbXCA93kuTVTzpQlm?p=catalogue
the full table
<thead>
<tr>
<th class="hidden-xs">ID</th>
<th>Name</th>
<th>Date</th>
<th>Grade</th>
<th>Subject</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="trainee in trainees | filter: search" ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index)">
<td class="hidden-xs">{{$index+1}}</td>
<td>{{trainee.name}}</td>
<td>{{trainee.date | date:'d/M/yyyy'}}</td>
<td>{{trainee.grade}}</td>
<td>{{trainee.subject}}</td>
<td><a class="btn btn-info">Edit</a></td>
</tr>
</tbody>
</table>
First make the plunk work!
You were referencing a file that didn't exist in the plunk, so had to change:
<script src="main.js"></script> to <script src="script.js"></script>.
Amend your ng-disabled directive:
Also had to add ng-disabled="selectedRow !== $index" on your link button:
<td><a class="btn btn-info" ng-disabled="selectedRow !== $index">Edit</a></td>
I don't think you need the $scope.disabled variable as the $scope.selectedRow along with $index takes care of enabling/disabling each edit button.
Prevent click events from bubbling up the DOM tree:
The ng-click on your tr tag will be triggered by any ng-click that you place on your edit link button, to fix that you have to add $event.stopPropagation(); after any function that you put there:
<a class="btn btn-info"
ng-disabled="selectedRow === $index"
ng-click="onEditButtonClicked(); $event.stopPropagation();">
Edit
</a>
Fix Invalid HTML Markup:
Moved the following up and out of the table:
<div class="form-inline">
<input class="form-control" type="text" placeholder="Search" ng-model="search">
<a type="button" href="#add-form" class="btn btn-info" ng-click="addForm()">Add new trainee</a>
<button class="btn btn-danger" ng-click="removeTrainee(trainee)">Remove</button>
</div>
Styles.css 404 not Found:
Last but not least styles.css doesn't exist and gets a 404 not found, and so the following can be removed: <link rel="stylesheet" href="styles.css">
Working Plunk
i don't understand what my ng-show not working when i click on my button with ng-click...
thanks for help.
<div ng-show="showMe == 1">
<h5>Ajouter</h5>
<input type="texte">
</div>
<table>
<thead>
<tr>
<th>Numéro :</th>
<th>Type de Produit :</th>
</tr>
</thead>
<tbody ng-repeat="product in shopCtrl.tableProduct">
<tr>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td class="text-right">
<div>
<button ng-click="showMe = 1">Ajouter</button>
</div>
</td>
</tbody>
</table>
The answer of gtlambert is true. However if you have more than one level of ng-repeat or another directive that does the same thing you'll have trouble.
To not have any trouble use objects like this :
$scope.params = {showMe:0};// init in controller
<div ng-show="params.showMe == 1">
<button ng-click="params.showMe = 1">
This will always works whatever the number of ng-repeat/directive you use.
When you use ng-repeat this creates a new scope. To access the main controller scope from inside the ng-repeat you need to use $parent.
So, change your ng-click to $parent.showMe = 1 and this will fix the problem:
<button ng-click="$parent.showMe = 1">Ajouter</button>
Here you go. I have a working example. showMe becomes a member of your controller.
function ShopController() {
this.showMe = false;
this.tableProduct = [{
id: 1,
name: "Bar"
}];
}
angular.module('app', [])
.controller('ShopController', ShopController);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ShopController as shopCtrl">
<div ng-show="shopCtrl.showMe">
<h5>Ajouter</h5>
<input type="texte">
</div>
<table>
<thead>
<tr>
<th>Numéro :</th>
<th>Type de Produit :</th>
</tr>
</thead>
<tbody ng-repeat="product in shopCtrl.tableProduct">
<tr>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td class="text-right">
<div>
<button ng-click="shopCtrl.showMe = true">Ajouter</button>
</div>
</td>
</tbody>
</table>
</div>
I'm running into an issue with angular-bootstrap collapse directive and CSS. Basically when you add the directive "collapse" to a div it works fine. But when you try to expand/collapse a table row it seems to have some issues with the transition effect.
HTML:
<div ng-controller="dogCtrl">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Breed</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="dog in dogs">
<td>{{dog.name}}</td>
<td>{{dog.breed}}</td>
</tr>
<tr collapse="isCollapsed" ng-repeat-end="">
<td colspan="3">
<h3>Pet details</h3>
<p>some details about this pet.</p>
</td>
</tr>
</tbody>
</table>
</div>
Controller:
var app = angular.module('dogApp', ['ui.bootstrap']);
app.controller('dogCtrl', function($scope) {
$scope.isCollapsed = true;
$scope.dogs = [
{
name: "Sparky",
breed: "Parson Russell Terrier"
}, {
name: "Shep",
breed: "German Shepard"
}
];
});
Codepen Example: http://codepen.io/anon/pen/qEoOBq
Since the height of a table cell is “the minimum height required by the content” (as in CSS 2.1 rules) I guess you can't animate the table row height.
Probably the workaround involves wrapping the content of the cell into a div element and animating this container as well.
This worked for me but I have not tested heavily:
<tr ng-repeat-end="">
<td colspan="2" style="padding: 0">
<div collapse="isCollapsed">
<h3>Pet details</h3>
<p>some details about this pet.</p>
</div>
</td>
</tr>
Its a known issue for angular animations on table rows.
https://github.com/twbs/bootstrap/issues/12593
The best way to do it is shown here.
<tr ng-click="row1Open = !row1Open">
<td>Acrylic (Transparent)</td>
<td>{{row1Open}}</td>
<td>foo</td>
</tr>
<tr class="collapse-row">
<td>
<div collapse="!row1Open">
<div class="collapse-cell">
Detail Row {{demo.hello}}
</div>
</div>
</td>
<td>
<div collapse="!row1Open">
<div class="collapse-cell">
abc
</div>
</div>
</td>
<td>
<div collapse="!row1Open">
<div class="collapse-cell">
$2.90
</div>
</div>
</td>
</tr>
I've just started using AngularJS and wanted to create a custom template directive for creating "in-place" editable tables. The idea would be to have something like:
<tr ng-repeat="customer in model.customers">
<ng-template ng-hide="customer === model.selectedCustomer"> <!-- display template-->
<td>{{customer.name}}</td>
</ng-template>
<ng-template ng-show="customer === model.selectedCustomer"> <!-- edit template -->
<td><input type="text" ng-model="customer.name"/></td>
</ng-template>
</tr>
It could then also be extended to specify a templateUrl e.g. <ng-template template-url="foo.html"></ng-template>
When I apply the ng-show directive to my custom directive it does not work. Here's the code for my directive:
var demo = angular.module("demo", [])
.directive("ng-template", function() {
return {
restrict: "E",
replace: true,
transclude: true
}
});
and HTML (http://jsfiddle.net/benfosterdev/ASXyy/):
<div ng-app="demo">
<table>
<tr ng-repeat="name in ['jane', 'john', 'frank']">
<ng-template ng-show="name !== 'frank'">
<td>{{name}}</td>
</ng-template>
</tr>
</table>
</div>
Furthermore, when I look at the generated HTML my custom directive doesn't even appear in the table:
<div ng-app="demo" class="ng-scope">
<ng-template ng-show="name !== 'frank'" class="">
</ng-template>
<table>
<tbody>
...
</tbody>
</table>
</div>
Essentially I'm trying to avoid writing code like this (setting the ng-show directive on every <td> element):
<table>
<tr ng-repeat="customer in customers">
<ng-template>
<td ng-hide="isSelected">{{customer.name}}</td>
<td ng-hide="isSelected">{{customer.age}}</td>
<td ng-hide="isSelected"><button ng-click="edit(customer)"</td>
<td ng-show="isSelected"><input type="text" ng-model="customer.name"/></td>
<td ng-show="isSelected"><input type="text" ng-model="customer.age"/></td>
<td ng-show="isSelected"><button ng-click="save(customer)"</td>
</ng-template>
</tr>
</table>
A couple of things occur to me when I look at your code.
ng-include offers very similar functionality to your proposal for extending ng-template. If you're going to load a view based on the state of the underlying model then I think this would be the way to go.
If you're not going to be loading the template from a separate view file, why not just use ng-show (or ng-if / ng-switch, which I prefer in most cases) on your td element?
Here is some example code using ng-include:
<table>
<thead>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th></th>
</thead>
<tbody>
<tr ng-repeat="item in items" ng-include="getTemplate(item)"></tr>
</tbody>
</table>
Here is the full JSFiddle: http://jsfiddle.net/qQR6j/2.
Use ng-repeat-start and ng-repeat-end to specify the two alternative <tr> tags.
<div ng-app="demo">
<table ng-controller="Ctrl">
<tr ng-repeat-start="name in ['jane', 'john', 'frank']" ng-hide="isSelected(name)">
<td>{{name}} <button ng-click="select(name)">edit</button></td>
</tr>
<tr ng-repeat-end ng-show="isSelected(name)">
<td>{{name}}!</td>
</tr>
</table>
</div>
With this javascript
var demo = angular.module("demo", []);
demo.controller("Ctrl",
function Ctrl($scope) {
var selected;
$scope.isSelected = function(name) {
return selected === name;
};
$scope.select = function(name) {
selected = name;
};
});
Live example: http://jsfiddle.net/6FtjG/1/
Your browser renders the 'ng-template' outside of the table because its not a valid child of tr. Even if you have set replace to true, the directive needs to be rendered before it can be replaced.
You can see it is because of the table, because this does work:
<div>
<div ng-repeat="name in ['jane', 'john', 'frank']">
<ng-template ng-show="name !== 'frank'">
<div >{{name}}</div>
</ng-template>
</div>
</div>
see: Fiddle
This is something your browser does so you cannot avoid it.