My code is like this: when you check the 'hide' column, the whole row is hidden. I also have a 'Show All' checkbox. When I check it, all rows (including the hidden ones) are shown. But when I uncheck it, all rows disappear. How can I make it so only the hidden rows disappear when I uncheck 'Show All', and the other rows still remain visible?
<body ng-app="myApp" ng-controller="myController">
<h1>Fruits in Vietnam</h1>
<hr>
<form name="myForm">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
</button>
</div>
</div>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Hide</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruitnameDetail" ng-show="showall" ng-hide="hidef">
<td>{{fruit.fruitname}}</td>
<td><input type="checkbox" ng-model="hidef"></td>
<td>
<a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>
<script>
var app = angular.module("myApp", []);
app.controller('myController', function ($scope, $window) {
$scope.fruitnameDetail = [
{
"fruitname": "Banana"
},
{
"fruitname": "Mango"
},
{
"fruitname": "Orange"
}
];
$scope.addnew = function () {
var fruitnameDetail = {
fruitname: $scope.mdfruitname
};
$scope.fruitnameDetail.push(fruitnameDetail);
$scope.mdfruitname = '';
};
$scope.removefruitname = function (index) {
var name = $scope.fruitnameDetail[index].fruitname;
if ($window.confirm("Do you want to delete " + name + " ?")) {
$scope.fruitnameDetail.splice(index, 1);
}
};
});
</script>
Do not use ng-show and ng-hide at the same time. Just change a little bit your condition for ng-repeat. Here the example that should work:
<body ng-app="myApp" ng-controller="myController">
<h1>Fruits in Vietnam</h1>
<hr>
<form name="myForm">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
</button>
</div>
</div>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Hide</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruitnameDetail" ng-show="showall || !hidef">
<td>{{fruit.fruitname}}</td>
<td><input type="checkbox" ng-model="hidef"></td>
<td>
<a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>
Related
I have made text boxes for my website using Angular, users have an option to add more information by clicking a button that gives them another group of text boxes to fill in. However, when this happens the new text boxes appear with the previous information I filled in. I want the additional text boxes to be blank as they were with the first set, but I am not sure how to achieve this.
<button type="button" class="close" ng-click="$ctrl.closeInfoModel()">×</button>
<h5 class="title">Add Details</h5>
</div>
<div class="modal-body">
<ng-form name="detailsForm">
<div class="row">
<div class="col-sm-12">
<h5 class="modal-title">Client Details:
<a data-ng-show="!$ctrl.isEditingDetails && !$ctrl.addingAnotherSetOfDetails"
data-ng-click="$ctrl.addingAnotherSetOfDetails = true"><i class="tools-plus fa fa-plus" aria-hidden="true"></i></a>
<span data-ng-show="$ctrl.isEditingDetails || $ctrl.addingAnotherSetOfDetails">
<a title="Save" data-ng-click="$ctrl.saveDetails(detailsForm.$valid)" ><i class="tools-plus fa fa-floppy-o" aria-hidden="true"></i></a>
<a title="Saving" ng-if="$ctrl.isSavingDetails"><i class="tools-plus fa fa-spinner fa-spin" aria-hidden="true"></i></a>
<a title="Cancel" data-ng-click="$ctrl.stopEditingOrAdding()"><i class="tools-plus fa fa-times" aria-hidden="true"></i></a>
</span></h5>
<br>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<table class="table" ng-if="$ctrl.clientDetails.length == 0">
<thead>
<tr>
<td><b>Desired Amount</b></td>
<td><b>Credit Limit</b></td>
</tr>
</thead>
<tbody>
<tr>
<td ng-if="$ctrl.isEditingDetails && !ctrl.addingAnotherSetOfDetails">
<input name="desiredAmount" ng-model="$ctrl.inputDesiredAmount" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deletedesiredAmount()"></div></td>
<td ng-if="$ctrl.isEditingDetails && !ctrl.addingAnotherSetOfDetails">
<input name="creditLimit" ng-model="$ctrl.inputCreditLimit" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deleteCreditLimit()"></div></td>
</tr>
</tbody>
</table>
<table class="table" ng-if="$ctrl.clientDetails.length > 0">
<thead>
<tr>
<td><b>Desired Amount</b></td>
<td><b>Credit Limit</b></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="criteria in $ctrl.clientDetails">
<td ng-if="!$ctrl.isEditingDetails">{{criteria.desiredAmount}}</td>
<td ng-if="$ctrl.isEditingDetails && !ctrl.addingAnotherSetOfDetails">
<input name="desiredAmount" ng-model="$ctrl.inputdesiredAmount" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deletedesiredAmount()"></div></td>
<td ng-if="!$ctrl.isEditingDetails">{{criteria.CreditLimitLimit}}</td>
<td ng-if="$ctrl.isEditingDetails && !ctrl.addingAnotherSetOfDetails">
<input name="creditLimit" ng-model="$ctrl.inputCreditLimit" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deleteCreditLimit()"></div></td>
</tr>
</tbody>
</table>
<table class="table" ng-if="$ctrl.addingAnotherSetOfDetails">
<thead>
</thead>
<tbody>
<tr>
<td>
<input name="desiredAmount" ng-model="$ctrl.inputdesiredAmount" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deletedesiredAmount()"></div></td>
<td>
<input name="creditLimit" ng-model="$ctrl.inputCreditLimit" type="text" class="form-control"
yl-account-address-text ng-minlength="3" ng-maxlength="30">
<div data-ng-click="$ctrl.deleteCreditLimit()"></div></td>
</tr>
</tbody>
</table>
</div>
</div>
Component file
All references to the function that adds text boxes are below, I set addingAnotherSetOfDetails to false in the component controller
public stopEditingOrAdding(): void {
this.isEditingDetails = false;
this.addingAnotherSetOfDetails = false;
}
public saveDetailsForClients(isFormValid: boolean): void {
if (!isFormValid) {
return;
}
let clientDetails = new app.domain.detailsCriteriaModel(this.inputDesiredAmount, this.inputCreditLimit);
this.detailsCriteria.push(clientDetails);
this.isEditingDetails = false;
this.addingAnotherSetOfDetails = false;
}
In my angularjs app there a rows (using ng-repeat), created through .
The code creating rows is below:
<tbody>
<tr ng-repeat="data in downloads">
<td data-title="ID">{{$index + 1}}</td>
<td data-title="User">{{data.user_name}}</td>
<td data-title="Issue">{{data.download_name}}</td>
<td data-title="Progress">{{data.size}}</td>
<td data-title="Completed time" am-time-ago="data.completed_time|amFromUnix"</td>
<td class="information-parent" data-title="More">
<md-icon ng-click="switchIcon()" class="bassa-red-color">{{icon}}</md-icon
</td>
</tr>
</tbody>
I'm trying to implement something that when you click the arrow, the row expands with information appearing like this:
I however can not get the information to appear along the bottom like that. What should I be trying to implement to get text along the bottom - flex box, inline-box ?
Take a look at Bootstrap collapse.js. I think this is what you are looking for, of course, you have to change it in order to meet your needs.
Try below code for your scenario.
(function(ng, app){
app = angular.module('app', [])
app.controller("mainController", ['$scope',
function($scope) {
$scope.downloads = [{
"user_name": "John",
"download_name": "Doe jhonejhonejhone",
"size": "0 byte"
},
{
"user_name": "Anna",
"download_name": "Doe DoeDoeDoeDoe",
"size": "0 byte"
},
{
"user_name": "Maron",
"download_name": "Anna DoeDoeDoeDoeDoe",
"size": "5 byte"
}
];
$scope.editFiles = function() {
$scope.editBar = true;
};
$scope.remove = function(index) {
$scope.downloads.splice(index, 1);
};
}
]);
}(angular));
.btn-primary{
margin-right: 10px;
}
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" ng-controller="mainController">
<div class="row">
<div class="col-md-12">
<input type="submit" class="btn btn-primary addnew pull-left" value="Edit Files" ng-click="editFiles()">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<form>
<table border=1 class="table table-striped table-bordered">
<thead>
<tr>
<th>
<b> # </b>
</th>
<th>User</th>
<th>Download Name</th>
<th>Complete Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in downloads">
<td>
<b> {{$index + 1}} </b>
</td>
<td>
{{data.user_name}}
</td>
<td>
{{data.download_name}}
<div class="btn-group pull-right" ng-show="editBar">
<button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-pencil"></span></button>
<button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" ng-click="remove($index)"></span></button>
</div>
</td>
<td>
{{data.size}}
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can try the following:
move your ng-repeat to your tbody
add ng-init="data.showSubRow = false" to your tbody
add another row to the tbody that should only be visible when showSubRow is true
so your ng-repeat would look like
<tbody ng-repeat="data in downloads" ng-init="data.showSubRow = false">
<tr>
visible row
</tr>
<tr ng-show="data.showSubRow">
visible when clicked
</tr>
</tbody>
now you can add individual buttons in each row to show / hide content on individual rows or add an edit all function that would make all subrows visible
show / hide individual row
<tr>
<td data-title="ID">
{{$index + 1}
<span>
<button ng-show="!data.showSubRow" ng-click="data.showSubRow = true">+</button>
<button ng-show="data.showSubRow" ng-click="data.showSubRow = false">-</button>
</span>
</td>
<td data-title="User">{{data.user_name}}</td>
<td data-title="Issue">{{data.download_name}}</td>
<td data-title="Progress">{{data.size}}</td>
<td data-title="Completed time" am-time-ago="data.completed_time|amFromUnix"</td>
<td class="information-parent" data-title="More">
<md-icon ng-click="switchIcon()" class="bassa-red-color">{{icon}}</md-icon
</td>
</tr>
display all
$scope.editAll = function(){
angular.forEach($scope.downloads, function(value, key) {
value.showSubRow = !value.showSubRow;
});
}
Working sample ----> Demo
I am using HTML webapp form and the fields are selected as a mandatory (required) but I am able to submit the data without updating required fields.
Below are my detailed HTML and gs script, help me to fix the concern
<script>
function submitForm(btnClicked) {
$("button").attr("disabled", true);
var jsonObj = {};
jsonObj["Project Name"] = $("#ProjectName").val();
jsonObj["updateBtn"] = $(btnClicked).text();
google.script.run.withSuccessHandler(afterSaving).saveDate(jsonObj);
}
function afterSaving() {
alert("Thanks, Your response has been recorded");
$("button").attr("disabled", false);
}
</script>
<form action="" method="get">
<div class="container">
<table class="table table-bordered" width="" style="width:54%">
<thead>
<tr class="one">
<th width="33%">
Project Name
</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="form-group txt">
<input name="" type="text" placeholder="" class="form-control input-md" id="ProjectName" required="required">
</div></td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<div class="col-md-2 col-md-offset-5">
<div class="form-group">
<button style="display:block;width:100%" id="updateBtn" name="singlebutton" class="btn btn-success" type="submit" onclick="submitForm()" >Save</button>
</div>
</div>
</div>
You need to remove onclick="submitForm()" and instead add onsubmit="submitForm()" in the form tag.
<form onsubmit="return submitForm()">
Also, add return false; to submitForm function.
I am writing a small program in Vue.js, but I am getting stuck with an error.
I want the X button to remove each item in a list. I used splice(index,1), but the item isn't being removed. What am I missing?
My HTML:
<div id="app" class="container">
<div class="row">
<div class="col-md-4">
<h1>Add Student</h1>
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" v-model="newStudent.name" class = "form-control" placeholder="Student Name">
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="text" id="address" v-model="newStudent.address" class = "form-control" placeholder="Address">
</div>
<button class="btn btn-success" v-on:click = "addStudent">Add</button>
</div>
<div class="col-md-8">
<h1>All Students</h1>
<table class="table table-striped">
<thead>
<tr>
<td>Name</td>
<td>Address</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr v-for = "student in students">
<td>{{student.name}}</td>
<td>{{student.address}}</td>
<td><button type="button" class="btn btn-danger" v-on:click="deleteStudent($index)">X</button></td>
</tr>
</tbody>
</table>
</div>
</div> <!--End of Row-->
<br>
<br>
<div class="row">
<div class="col-md-12">
<pre>{{ $data | json }}</pre>
</div>
</div>
</div>
My JS:
<script>
new Vue({
el: "#app",
data: {
newStudent: {name: "", address: ""},
students: []
},
methods: {
addStudent: function(){
var name = this.newStudent.name.trim();
var address = this.newStudent.address.trim();
if(name && address){
this.students.push({name: name, address: address});
this.newStudent = {name: "", address: ""};
$("#name").focus();
}
},
deleteStudent: function(index){
this.students.splice(index,1)
}
}
});
</script>
The $index variable was removed in Vue 2. So, you're not passing the index in correctly.
Specify the index variable in the v-for and pass that to the deleteStudent method instead:
<tr v-for="student, index in students">
<td>{{student.name}}</td>
<td>{{student.address}}</td>
<td>
<button
type="button"
class="btn btn-danger"
v-on:click="deleteStudent(index)"
>X</button>
</td>
</tr>
This is covered in the documentation on list rendering in Vue.
I am using onaftersave() function to save the table data. In dir-paginate i am using ng-repeat to read the table row values. I kept itemsperpage is 5. obviously 6th row will be display in second Page. When I try to edit the second page row values it is not updating the second page rows. How to resolve it?
<form editable-form name="tableform1" oncancel="cancel()" onaftersave="saveTable(Manage_Role.Description)">
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default panel-table">
<div class="panel-heading">
<div class="row">
<div class="col col-xs-6">
</div>
<div class="col col-xs-6 text-right">
<button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-sm btn-primary btn-create" title="Add New Role">Add New Role</button>
</div>
</div>
</div>
<div class="panel-body scrollbar">
<table class="table table-striped table-bordered table-list">
<thead>
<tr>
<th style="width: 25%" align="center">
Name
</th>
<th style="width: 35%">
Description
</th>
<th style="width: 30% " align="center">
IsActive?
</th>
<th style="width: 10% " align="center"><a href="" ng-click="orderByField='IsActive';
reverseSort = !reverseSort" title="Assign">Assign</a></th>
<th style="width: 1%" align="center" ng-show="false">DirtyFlag</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="RoleNameID" ng-model="Manage_Role1.RoleName" placeholder="search" class="searchbox" onkeydown="return (event.keyCode!=13);"
/>
</td>
<td>
<input type="text" id="DescriptionID" ng-model="Manage_Role1.Description" placeholder="search" class="searchbox" onkeydown="return (event.keyCode!=13);"
/>
</td>
<td>
<select name="DropFilter" ng-model="Manage_Role1.IsActive" class="searchbox">
<option value="">All</option>
<option value=false>False</option>
<option value=true>True</option>
</select>
</td>
<!--<td></td>-->
</tr>
<tr dir-paginate="Manage_Role in Manage_Roleser | itemsPerPage:5 | filter:DropFilter | filter:Manage_Role1 | orderBy:orderByField:reverseSort "
ng-class-odd="'odd'">
<td ng-click="tableform1.$show()">
<span e-ng-change="applyHighlight($data,$index)" editable-text="Manage_Role.RoleName" ng-attr-title="{{Manage_Role.RoleName}}"
e-form="rowform" ng-click="rowform.$show()">
{{ Manage_Role.RoleName | uppercase }}
</span>
</td>
<td ng-click="tableform1.$show()">
<div>
<span e-ng-change="applyHighlight($data,$index)" editable-text="Manage_Role.Description" e-form="rowform" ng-attr-title="{{Manage_Role.Description}}"
ng-click="rowform.$show()">
{{ Manage_Role.Description || 'empty' }}
</span>
</div>
</td>
<td ng-click="tableform1.$show()" align="center">
<span e-ng-change="applyHighlight($data,$index)" ng-checked="Manage_Role.IsActive" editable-checkbox="Manage_Role.IsActive"
e-form="rowform" ng-click="applyHighlight($data,$index);tableform.$show()">
<input type="checkbox" ng-model="Manage_Role.IsActive" width="20" ng-attr-title="{{Manage_Role.IsActive}}" />
</span>
</td>
<td align="center">
<input type="image" data-toggle="modal" ng-click="Rolepopupclick(Manage_Role._id,Manage_Role.RoleName)" title="Assign UI"
data-target="#Div1" src="App_Themes/Images/AssignUser.png"
alt="Submit" width="28" height="28" />
</td>
<td ng-show="false">
<input type="text" ng-model="Manage_Role.DirtyFlag" ng-show="false" />
</td>
</tr>
</tbody>
</div>
</table>
</div>
<div class="panel-footer">
<div class="row">
<div class="col col-xs-8">
<dir-pagination-controls max-size="5" direction-links="true" boundary-links="true">
</dir-pagination-controls>
</div>
<div class="col col-xs-4">
<div class="btn-form" ng-show="tableform1.$visible" style="float:right">
<button type="submit" ng-disabled="tableform1.$waiting" title=" Save Changes" class="btn btn-primary fa fa-save" ng-click="NotifyClick()"> Save</button>
<input type="button" ng-disabled="tableform1.$waiting" title=" Close Edit Form Without Saving Changes" ng-click="refreshUI();tableform1.$cancel()"
class="btn btn-danger fa fa-close" value="X Cancel" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
controller code:
$scope.saveTable = function ()
{
debugger;
if(NotifyCount!=1){
var RoleNamechk = '';
for (var i = 0; i < $scope.Manage_Roleser.length; i++) {
RoleNamechk = $scope.Manage_Roleser[i].RoleName;
for (var j = 0; j < $scope.Manage_Roleser.length; j++) {
var RoleName = $scope.Manage_Roleser[j].RoleName;
if (RoleNamechk == RoleName) {
count++;
}
}
}
if (count == $scope.Manage_Roleser.length)
{
for (var i = 0; i < $scope.Manage_Roleser.length; i++) {
var id = $scope.Manage_Roleser[i]._id;
var rolename = $scope.Manage_Roleser[i].RoleName;
var isactive = $scope.Manage_Roleser[i].IsActive;
var description = $scope.Manage_Roleser[i].Description;
if (description == "")
{
description = 'empty';
}
if ($scope.Manage_Roleser[i].DirtyFlag == "True")
{
$scope.LoggedinUsers = $cookieStore.get('LoggedinUser');
var updatedBy= $scope.LoggedinUsers;
$http.put('/Roleupdate/' + id + '/' + rolename + '/' + isactive + '/' + description + '/' + updatedBy).then(function (response) {
refresh();
});
}
count=0;
}
$notify.success('Success', 'Role is Updated Successfully');
}
else {
$notify.warning('Warning', 'Role Name is Already Exists');
count = 0;
return '';
}
}
};
in ng-change I am checking dirty flag of selected index because it is updating all the row values. for that I am updating only selected($dirty) row alone. In second page it is not taking table index correctly. If I select 2nd page 3 row it will assume or taking index of the particular page. It should take index of selected row from the over all table row
$scope.applyHighlight = function ($data,index) {
$scope.Manage_Roleser[index].DirtyFlag = "True";
var dataSpan = $(event.currentTarget).closest('td');
if (!dataSpan.hasClass("highlighted")) {
$(dataSpan).addClass("highlighted");
}
}