I've got some global variables in my html code responsible for showing and / or hiding a new table entry field and an edit table entry field. For some reasons, each time I try to show or hide one of those fields using the buttons in my table, it doesn't work.
Here's my code:
<!--Page HTML du module News du dashboard.-->
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="./bower_components/font-awesome/css/font-awesome.min.css">
<meta charset="UTF-8">
</head>
<body ng-app="myApp">
<div class="container" ng-controller="AppCtrl">
<br>
<button type="button" class="btn btn-default pull-right" ng-click="add = !add; updt = false"/>
Ajouter une annonce
<span class="glyphicon glyphicon-new-window"></span>
</button>
<br>
<br>
<table class="table table-striped table-responsive table-bordered table-hover table-condensed">
<thead>
<tr>
<th class="col-md-1 text-center">
<span class="glyphicon glyphicon-pushpin"></span>
</th>
<th class="col-md-7">News</th>
<th class="col-md-1">Auteur</th>
<th class="col-md-1">Date</th>
<th class="col-md-2">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in queryResult">
<td class="text-center">
<b> {{x.pinned}} </b>
</td>
<td>
<b>{{x.title}}</b>
<button type="button" class="btn btn-default pull-right" ng-click="body = !body">
<span class="fa fa-chevron-up" ng-show="body"></span>
<span class="fa fa-chevron-down" ng-hide="body"></span>
</button>
<div class="check-element animate-hide" ng-show="body">
<p>{{x.body}}</p>
</div>
</td>
<td>
{{x.author}}
</td>
<td>
{{x.date}}
</td>
<td>
<div class="text-center">
<button type="button" class="btn btn-default" ng-click="pinUnpin(x.id,x.pinned)">
<span class="glyphicon glyphicon-pushpin"></span>
</button>
<button type="button" class="btn btn-default" ng-click="prepareUpdt(x.id,x.title,x.body); updt = !updt; add = false"/>
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-default" ng-click="delEntry(x.id, x.title)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<div ng-show="add">
<div class="page-header">
<h3>Nouvelle news</h3>
</div>
<input type="text" class="form-control" ng-model="newTitle" placeholder="Titre (obligatoire)"/>
<br>
<input type="text" class="form-control" ng-model="newBody" placeholder="Commentaire (optionnel)"/>
<div class="checkbox">
<label><input type="checkbox" value="" ng-model="newPinned"/>Epingler la news?</label>
</div>
<div class="pull-right">
<button type="button" class="btn btn-default" ng-click="add = !add">
Annuler
<span class="glyphicon glyphicon-remove"></span>
</button>
<button type="button" class="btn btn-default" ng-click="newEntry()">
Envoyer
<span class="fa fa-check"></span>
</button>
</div>
</div>
<div ng-show="updt">
<div class="page-header">
<h3>Editer une news</h3>
</div>
<input type="text" class="form-control" ng-model="newTitle" placeholder="Titre (obligatoire)"/>
<br>
<input type="text" class="form-control" ng-model="newBody" placeholder="Commentaire (optionnel)"/>
<div class="pull-right">
<button type="button" class="btn btn-default" ng-click="updt = !updt">
Annuler
<span class="glyphicon glyphicon-remove"></span>
</button>
<button type="button" class="btn btn-default" ng-click="updtEntry(); updt = !updt">
Envoyer
<span class="fa fa-check"></span>
</button>
</div>
</div>
</div>
<!-- Scripts -->
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./controller.js"></script>
</body>
</html>
For instance, when I click on the first button (Ajouter une annonce), my "add" and "updt" div fields are shown or hidden accordingly. Same when I use the cancel button in those divs. But the button each table row:
<button type="button" class="btn btn-default" ng-click="prepareUpdt(x.id,x.title,x.body); updt = !updt; add = false"/>
<span class="glyphicon glyphicon-edit"></span>
</button>
doesn't seem to update my "add" and "updt" variables. And I know that my function prepareUpdt is called, so I know that ng-click is reached.
Where's the problem ?
This is due to a scoping issue with ng-repeat. More information is here.
Basically, add and updt do not exist in the outer scope (outside of the ng-repeat scope), and therefore their values never change when you click the button in the table.
To resolve, I suggest that you change each definition (line ~11, 55) of
ng-click="add = !add; updt = false"
to
ng-click="viewObj.add = !viewObj.add; viewObj.updt = false"
And
<div ng-show="add">
to
<div ng-show="viewObj.add">
..and..
<div ng-show="updt">
to
<div ng-show="viewObj.updt">
Also,
~77 to:
<button type="button" class="btn btn-default" ng-click="viewObj.add = !viewObj.add">
and
~95 to:
<button type="button" class="btn btn-default" ng-click="viewObj.updt = !viewObj.updt">
You also have a line around ~36 ng-click="body = !body". Since you are using that within the ng-repeat scope, you should be fine, however, bear in mind that will not be available outside of ng-repeat.
You shouldn't put this logic in your view. You should declare the variables in your controller and change them in your controller inside the function prepareUpdt(). This way angular will double bind these variables and update your view upon changes.
vm.updt = true;
vm.add = true;
function prepareUpdt() {
// your other code
vm.updt = !vm.updt;
vm.add = false;
}
and in your html:
<div ng-show="vm.add">
...
<div ng-show="vm.updt">
Related
I'm using angular2 in my project,i have a service which returns this JSON Object :
items={"departure":"New York","arrival":"California","stations":[{"station":"toto"},{"station":"titi"},{"station":"tata"}]}
i tried to populate this JSON object in the UI like this picture shows:
here's what the result looks like
heres the code :
<div class="panel-body panelcolor">
<div *ngIf="items?.departure">
<span>{{items.departure}}</span> -->
<span *ngIf="items.stations.length > 0">
{{items.stations[0].station}}
</span>
<span *ngIf="items.stations.length === 0">
{{items.arrival}}
</span>
<div class="input-group spinner">
<input type="text" formControlName="price" class="form-control">
<div class="input-group-btn-vertical">
<button (click)="spinnerPriceUp()" class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
<button (click)="spinnerPriceDown()" class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
<div *ngFor="let item of items.stations; let i=index, let last = last">
<div *ngIf="!last">
<span>{{item.station}}</span> --> <span *ngIf="items.stations[i+1]">{{items.stations[i+1].station}}</span>
<div class="input-group spinner">
<input type="text" formControlName="price" class="form-control">
<div class="input-group-btn-vertical">
<button (click)="spinnerPriceUp()" class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
<button (click)="spinnerPriceDown()" class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
</div>
<div *ngIf="items?.arrival && items?.stations.length > 0">
<span>{{items.stations[items.stations.length-1].station}}</span> --> <span>{{items.arrival}}</span>
<div class="input-group spinner">
<input type="text" formControlName="price" class="form-control">
<div class="input-group-btn-vertical">
<button (click)="spinnerPriceUp()" class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
<button (click)="spinnerPriceDown()" class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
<button style="margin-left: 479px;"> Submit </button>
my problem is when i tried clic (up or down) the spinner to change the value of the textBox, all the textBoxes change its value.can anyone help please to fix this problem ? I tried to use formgroup to fix this issue but i didnt manage to fix it.
I am unsure what's inside you're spinnerPriceUp() and spinnerPriceDown() functions.
You are rendering textBox from inside of a ngFor loop.
That is why all the textboxes rendered from this loop are getting
targeted for the value change.
A way to fix this is by assigning dynamic IDs to you're
element.
<input [attr.id]="'textbox' + i">
'i' being index & 'textbox' is some text for the ID.
now you have unique ids to your textboxes. Further, you can pass these IDs to the functions performing the update.
Hope this solves you're issue
I am in trouble with getting specific variable javascript class name from Laravel loop.I tried to get it from html data but I got only the first data info of loop.
Here is my blade
#foreach($myanmarmenus as $myanmarmenu)
<div class="col-md-6 col-sm-12">
<div class="menu">
<img src="{{ '/images/menus/'. $myanmarmenu->image }}" class="menuimg">
<p class="menutitle">{{$myanmarmenu->title}} <span class="menuprice">{{$myanmarmenu->price}} <span id="kyat">Ks</span> </span>
</p>
<p class='menudescription'>
{{$myanmarmenu->description}}
</p>
<span class="menushop">
#foreach($myanmarmenu->shops as $shop)
{{$shop->name}}
#endforeach
</span>
<!-- spinner -->
<div class="custom_spinner {{$myanmarmenu->title . $myanmarmenu->id}}" data-spinnerclass="{{$myanmarmenu->id}}">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-sm btn-number" data-type="minus" data-field="quant[2]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[2]" class="form-control input-sm input-number" value="1" min="1" max="1000" id="spinnerval-{{$myanmarmenu->title . $myanmarmenu->id}}">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-sm btn-number" data-type="plus" data-field="quant[2]">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
<!-- spinner -->
<!-- add -->
<div class="spinner_btn {{$myanmarmenu->title . $myanmarmenu->id}}" data-addclass="{{$myanmarmenu->id}}">Add Item</div>
<!-- add -->
</div>
</div>
#endforeach
And this is js
$('.spinner_btn').click(function () {
var spinner = $(".custom_spinner").data('spinnerclass');
alert(spinner);
});
my actual purpose is to get the specific class name
I think you mean this:
$('.spinner_btn').each(function () {
$(this).on('click', function () {
var spinner = $(this).siblings(".custom_spinner").data('spinnerclass');
alert(spinner);
});
});
I have a delete button in every row of my table. when the user clicks on the delete button, a modal will pop out prompting the user "Are you
sure you want to delete this Record?". If the user clicks yes, the row will be deleted from the table.
I tried doing
$(this).closest('tr').remove();
But it's not working.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
<title>Form</title>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<div class="container">
<div class="panel">
<div class="row">
<div class="col-md-12">
<table id="mytable" class="table">
<thead>
<tr>
<th class="text-center">ID</th>
<th class="text-center">Name</th>
<th class="text-center">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td class="text-center"><p data-placement="top"
data-toggle="tooltip" title="Delete">
<button class="btn btn-danger btn-xs deletebtn"
data-title="Delete" data-toggle="modal"
data-target="#deletemodal">
<span class="glyphicon glyphicon-trash"></span>
</button>
</p></td>
</tr>
<tr>
<td>2</td>
<td>Mary</td>
<td class="text-center"><p data-placement="top"
data-toggle="tooltip" title="Delete">
<button class="btn btn-danger btn-xs deletebtn"
data-title="Delete" data-toggle="modal"
data-target="#deletemodal">
<span class="glyphicon glyphicon-trash"></span>
</button>
</p></td>
</tr>
<tr>
<td>3</td>
<td>Jane</td>
<td class="text-center"><p data-placement="top"
data-toggle="tooltip" title="Delete">
<button class="btn btn-danger btn-xs deletebtn"
data-title="Delete" data-toggle="modal"
data-target="#deletemodal">
<span class="glyphicon glyphicon-trash"></span>
</button>
</p></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal fade" id="deletemodal" tabindex="-1" role="dialog"
aria-labelledby="delete" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<h4 class="modal-title custom_align" id="Heading">Delete this
entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger">
<span class="glyphicon glyphicon-warning-sign"></span> Are you
sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success" id="confirmdeletebtn">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#confirmdeletebtn").click(function() {
alert("in delete btn");
$(this).closest('tr').remove();
});
});
</script>
</body>
</html>
One way would be to toggle a selected class on the row when the delete button in the row is clicked ...then remove the row with that class with the modal button
$('.deletebtn').click(function(){
// remove selected class from other rows
$('tr.selected').removeClass('selected');
// add selected class to current row
$(this).closest('tr').addClass('selected');
});
$("#confirmdeletebtn").click(function() {
$('tr.selected').remove();
});
The bootstrap modal provides the relatedTarget (the clicked element) to the shown.bs.modal and show.bs.modal events.
This way you can store the reference and use it when deleting
$(document).ready(function() {
$('#deletemodal').on('shown.bs.modal', function(e) {
// store the clicked element as data on the confirm button
$('#confirmdeletebtn').data('triggered-from', e.relatedTarget);
});
$("#confirmdeletebtn").click(function() {
// retrieve the button that triggered the action and use it
var trigger = $(this).data('triggered-from');
$(trigger).closest('tr').remove();
$('#deletemodal').modal('hide');
});
});
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<div class="container">
<div class="panel">
<div class="row">
<div class="col-md-12">
<table id="mytable" class="table">
<thead>
<tr>
<th class="text-center">ID</th>
<th class="text-center">Name</th>
<th class="text-center">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td class="text-center">
<p data-placement="top" data-toggle="tooltip" title="Delete">
<button class="btn btn-danger btn-xs deletebtn" data-title="Delete" data-toggle="modal" data-target="#deletemodal">
<span class="glyphicon glyphicon-trash"></span>
</button>
</p>
</td>
</tr>
<tr>
<td>2</td>
<td>Mary</td>
<td class="text-center">
<p data-placement="top" data-toggle="tooltip" title="Delete">
<button class="btn btn-danger btn-xs deletebtn" data-title="Delete" data-toggle="modal" data-target="#deletemodal">
<span class="glyphicon glyphicon-trash"></span>
</button>
</p>
</td>
</tr>
<tr>
<td>3</td>
<td>Jane</td>
<td class="text-center">
<p data-placement="top" data-toggle="tooltip" title="Delete">
<button class="btn btn-danger btn-xs deletebtn" data-title="Delete" data-toggle="modal" data-target="#deletemodal">
<span class="glyphicon glyphicon-trash"></span>
</button>
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal fade" id="deletemodal" tabindex="-1" role="dialog" aria-labelledby="delete" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<h4 class="modal-title custom_align" id="Heading">Delete this
entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger">
<span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success" id="confirmdeletebtn">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
</div>
</div>
</body>
The this keyword there refer to the confirmation button in the modal dialog that has nothing to do with which tr to be deleted.
First, you'll have to listen for clicks on a .deletebtn button. This function when fired should show the modal dialog and listens for the click event on the #confirmdeletebtn button. If the user clicks it then you should delete the tr that was close the the .deletebtn button that was clicked (thus a reference of it should be saved once it was clicked).
$(function(){
var clickedBtn = null;
$(".deletebtn").click(function(){
clickedBtn = this;
// show the modal dialog
});
$("#confirmdeletebtn").click(function(){
if(clickedBtn){ // make sure we have assigned a reference
$(clickedBtn).closest("tr").remove();
clickedBtn = null; // not necessary
// close the modal dialog.
}
});
// add listeners for the close and abort buttons of the modal dialog if not already handeled by bootstrap or whatever you're using.
});
enter code here
function DeleteRows() {
alert("in delete btn");
$(this).closest('li').remove();
};
I have table for some task, In that table every row has one task.
In every row there is status which is controller by one button. Initial status of every task will be show as In Progress and text of Button as Mark Done, But when click on the button then It will change the status of the task as Done and change the text of button as Mark In Progress. If In future If we want to change the status of "Done" task then we can change the status through Button "Mark In Progress".
Please see the live DEMO
In this live demo,
Index.html
<!DOCTYPE html>
<html>
<head>
<title>ToDo API Client Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="tasksCtrl">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">ToDo API Client Demo</a>
</div>
</div>
<div>
<table class="table table-striped">
<tr><td style="width: 1px;"></td><td><b>Task</b></td><td><b>Options</b></td></tr>
<tr ng-repeat="task in tasks">
<td>
<span data-bind="visible: done" class="label label-success">Done</span>
<span data-bind="visible: !done()" class="label label-important">In Progress</span>
</td>
<td>{{task.title}}</td>
<td>{{task.description}}</td>
<td> <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a></td>
<td> <a class="btn" data-toggle="modal" data-ng-click="removeRow(task)">Delete</a></td>
<td>
<span data-bind="visible: done">
<button data-bind="click: $parent.markInProgress" class="btn">Mark In Progress</button>
</span>
</td>
<td>
<span data-bind="visible: !done()">
<button data-bind="click: $parent.markDone" class="btn">Mark Done</button>
</span>
</td>
</tr>
</table>
<a class="btn" data-toggle="modal" data-target="#add" ng-click="editTask(task)">Add Task</a>
</div>
<div id="modal" role="dialog" class="modal hide fade">
<div>
<div class="modal-header">
Task Dialog
</div>
<div class="modal-body">
<label for="txtName"></label>
<input type="text" ng-model="selectedTask.title" />
<input type="text" ng-model="selectedTask.description" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal">OK</button>
</div>
</div>
</div>
<div id="add" class="modal hide fade" tabindex="=1" role="dialog" aria-labelledby="addDialogLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="addDialogLabel">Add Task</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputTask">Task</label>
<div class="controls">
<input type="text" id="inputTask" ng-model="task1" placeholder="Task title" style="width: 150px;"><br />
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputDescription">Description</label>
<div class="controls">
<input type="text" id="inputDescription" ng-model="description1" placeholder="Description" style="width: 300px;">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="addNewTask()" data-dismiss="modal">Add Task</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('tasksCtrl', function($scope, $http) {
//$http.get("data.json")
$http.get("/todo/api/v1.0/tasks")
.success(function(response) {
console.log(response.tasks)
$scope.tasks = response.tasks;
});
$scope.editTask=function(task) {
$scope.selectedTask = task;
};
$scope.removeRow = function (task) {
$scope.tasks.splice(task, 1);
};
$scope.addNewTask=function(){
//$scope.tasks.push({title :$scope.task1,description: $scope.description1});
$scope.tasks.push({title : $scope.task1, description : $scope.description1});
$scope.task1='';
$scope.description1='';
// $scope.tasks.push('dhsh');
};
});
/*
app.controller('addNewTaskCtrl', ['$scope', function($scope){
$scope.addNewTask=function(){
var task;
}
}]);*/
</script>
</body>
</html>
Try to use ng-show and ng-hide directives.
Here's the Plunkr.
E.g.
<table class="table table-striped">
<tbody>
<tr>
<td style="width: 1px;"></td>
<td>
<b>Task</b>
</td>
<td>
<b>Options</b>
</td>
</tr>
<tr ng-repeat="task in tasks">
<td>
<span ng-show="done" class="label label-success">Done</span>
<span ng-hide="done" class="label label-important">In Progress</span>
</td>
<td>{{task.title}}</td>
<td>{{task.description}}</td>
<td>
<a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a>
</td>
<td>
<a class="btn" data-toggle="modal" data-ng-click="removeRow(task)">Delete</a>
</td>
<td ng-show="done">
<span>
<button ng-click="done = !done" class="btn">Mark In Progress</button>
</span>
</td>
<td ng-hide="done">
<span>
<button ng-click="done = !done" class="btn">Mark Done</button>
</span>
</td>
</tr>
</tbody>
</table>
Hope it helps.
I'm not quite sure if I understand what you're seeking to do, but I think you may be looking for this. ngHide allows you to have elements hidden based on what you set your "ngHide" value to.
For example:
<!-- when $scope.buttonStatus is set to true -->
<div ng-hide="$scope.buttonStatus" class="ng-hide"></div>
<!-- The element would be hidden -->
<!-- when $scope.buttonStatus's value is changed! -->
<div ng-hide="$scope.buttonStatus"></div>
<!-- The element would now be visible -->
Let me know if you'd like any more clarification! I know this is brief :)
I want to integrate the BlueImp AngularJS file upload plugin into my site , but the problem is I'm using a template / directive / controller / service model. Ignoring the service I still can't seem to find which part of the code goes where.
My template
<div> <form id="fileuploadbeta" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data" data-ng-app="demo" data-ng-controller="DemoFileUploadController" data-file-upload="options" data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple ng-disabled="disabled">
</span>
<button type="button" class="btn btn-primary start" data-ng-click="submit()">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="button" class="btn btn-warning cancel" data-ng-click="cancel()">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fade" data-ng-class="{in: active()}">
<!-- The global progress bar -->
<div class="progress progress-striped active" data-file-upload-progress="progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
<!-- The extended global progress state -->
<div class="progress-extended"> </div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table class="table table-striped files ng-cloak">
<tr data-ng-repeat="file in queue" data-ng-class="{'processing': file.$processing()}">
<td data-ng-switch data-on="!!file.thumbnailUrl">
<div class="preview" data-ng-switch-when="true">
<a data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery><img data-ng-src="{{file.thumbnailUrl}}" alt=""></a>
</div>
<div class="preview" data-ng-switch-default data-file-upload-preview="file"></div>
</td>
<td>
<p class="name" data-ng-switch data-on="!!file.url">
<span data-ng-switch-when="true" data-ng-switch data-on="!!file.thumbnailUrl">
<a data-ng-switch-when="true" data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery>{{file.name}}</a>
<a data-ng-switch-default data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}">{{file.name}}</a>
</span>
<span data-ng-switch-default>{{file.name}}</span>
</p>
<strong data-ng-show="file.error" class="error text-danger">{{file.error}}</strong>
</td>
<td>
<p class="size">{{file.size | formatFileSize}}</p>
<div class="progress progress-striped active fade" data-ng-class="{pending: 'in'}[file.$state()]" data-file-upload-progress="file.$progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
</td>
<td>
<button type="button" class="btn btn-primary start" data-ng-click="file.$submit()" data-ng-hide="!file.$submit || options.autoUpload" data-ng-disabled="file.$state() == 'pending' || file.$state() == 'rejected'">
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
<button type="button" class="btn btn-warning cancel" data-ng-click="file.$cancel()" data-ng-hide="!file.$cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
<button data-ng-controller="FileDestroyController" type="button" class="btn btn-danger destroy" data-ng-click="file.$destroy()" data-ng-hide="!file.$destroy">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
</td>
</tr>
</table>
</form></div>
Now my problem is what code should be in the directive? ( I mean what part of the template) And which should be in the Controller?