Can not show a default value in ng-select - angularjs

I have following code. I want to show a value in select from infoData--> selection field, but failed.
<tbody>
<tr ng-repeat="emp in infoData">
<td>
<input name="selection{{$index}}" ng-model="emp.name" ng-disabled="!enabledEdit[{{$index}}]" />
</td>
<td>
<select name="name{{$index}}" ng-model="emp.selection" ng-options="employe.id as employe.name for employe in designationList" ng-disabled="!enabledEdit[{{$index}}]"></select>
</td>
<td>
<input name="email{{$index}}" ng-model="emp.email" ng-disabled="!enabledEdit[{{$index}}]"/>
</td>
<td >
<div class="buttons" align="center">
<button class="btn btn-sm btn-primary" ng-click="editEmployee($index)">Edit</button>
<!--<button class="btn btn-sm btn-danger" ng-click="deleteEmployee($index)">Delete</button>-->
</div>
</td>
</tr>
</tbody>
How to select selection value in infoData in select ?
$scope.infoData = [
{ name: $scope.applicant, selection: "Debtor", email:"a#gmail.com"},
{ name: $scope.secureParty, selection:"Secured Party", email:"b#gmail.com"}
];
and
$scope.designationList = [
{name:"Debtor", id:"1"},
{name:"Secured Party", id:"2"}
];
Here I want to see a selected value in select

Related

I am assigning the dynamic id to the different element in HTML, but the id's are not working properly

<table ng-show = "noTaskAdded != 1" class="table table-hover hd-bg table-bordered">
<thead align="center">
<tr>
<th>SI No</th>
<th>Assigned Task</th>
<th>Closure Date</th>
<th>Comments</th>
<th>Status</th>
<th>Delete</th>
<th>Edit<th>
<td width = "20%">
<input class="form-control" ng-disabled = "x.status_flag == 1" id="{{ 'datepicker' + ($index + 8 ) }}" >
</td>
</thead>
<tbody ng-repeat="x in viewParticipantsComments">
<td>{{$index + 1}}</td>
<td width = "30%">
<textarea class="form-control" rows="3" cols="30" id = "description" ng-disabled = "x.status_flag == 1" ng-model = "x.task_description"></textarea>
</td>
<td width = "20%">
<input class="form-control" ng-disabled = "x.status_flag == 1" id="{{ 'datepicker' + ($index + 8 ) }}" >
</td>
<td ng-show = "x.status_flag == 1" width = "30%">
<textarea class="form-control" rows="3" cols="30" id = "description" ng-disabled = true>{{x.comments}}</textarea>
</td>
<td ng-show = "x.status_flag == 0">NA</td>
<td ng-show = "x.status_flag == 0">
<button class="btn btn-warning btn-sm waves-effect waves-light" alt="default">Pending</button>
</td>
<td ng-show = "x.status_flag == 1"> <button class="btn btn-success btn-sm waves-effect waves-light" alt="default">Done</button></td>
<td>
<button class="btn btn-danger btn-sm waves-effect waves-light" alt="default" ng-disabled = "x.status_flag == 1" ng-click = "deleteEditParticipants(x.id,x.task_description,x.closure_date,'delete')">Delete</button>
</td>
<td>
<button class="btn btn-primary btn-sm waves-effect waves-light" alt="default" ng-disabled = "x.status_flag == 1" ng-click = "deleteEditParticipants(x.id,x.task_description,x.closure_date,'update')">Update</button>
</td>
</tbody>
</table>
Here, i am using ng-repeat to assign the dynamic id's to the different element, and i have defined the datepickers of same name of id's like datepicker8, datepicker9 etc. But they are not getting called means they are not opening on click of that elements.
You need to fix your HTML because this is invalid and your browser will not be able to handle it properly:
<table ng-show = "noTaskAdded != 1" class="table table-hover hd-bg table-bordered">
<thead align="center">
<tr>
<th>SI No</th>
<th>Assigned Task</th>
<th>Closure Date</th>
<th>Comments</th>
<th>Status</th>
<th>Delete</th>
<th>Edit<th>
<th width = "20%">
<input class="form-control" ng-disabled = "x.status_flag == 1" id="{{ 'datepicker' + ($index + 8 ) }}" >
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in viewParticipantsComments">
<td>{{$index + 1}}</td>
<td width = "30%">
<textarea class="form-control" rows="3" cols="30" id = "description" ng-disabled = "x.status_flag == 1" ng-model = "x.task_description"></textarea>
</td>
<td width = "20%">
<input class="form-control" ng-disabled = "x.status_flag == 1" id="{{ 'datepicker' + ($index + 8 ) }}" >
</td>
<td ng-show = "x.status_flag == 1" width = "30%">
<textarea class="form-control" rows="3" cols="30" id = "description" ng-disabled = true>{{x.comments}}</textarea>
</td>
<td ng-show = "x.status_flag == 0">NA</td>
<td ng-show = "x.status_flag == 0">
<button class="btn btn-warning btn-sm waves-effect waves-light" alt="default">Pending</button>
</td>
<td ng-show = "x.status_flag == 1"> <button class="btn btn-success btn-sm waves-effect waves-light" alt="default">Done</button></td>
<td>
<button class="btn btn-danger btn-sm waves-effect waves-light" alt="default" ng-disabled = "x.status_flag == 1" ng-click = "deleteEditParticipants(x.id,x.task_description,x.closure_date,'delete')">Delete</button>
</td>
<td>
<button class="btn btn-primary btn-sm waves-effect waves-light" alt="default" ng-disabled = "x.status_flag == 1" ng-click = "deleteEditParticipants(x.id,x.task_description,x.closure_date,'update')">Update</button>
</td>
</tr>
</tbody>
</table>
After you fix the HTML check if your JS is working and verify if your code is really generating unique IDs

Display Data On Modal Screen Based On User Selection Using Check Box

"I've displayed 20 records in navigation tab and against each records I've added coloumn for checkbox. My requirement is if user selects records (row) 1, 4, 8 using checkbox and click on "Edit" button on top of Navigation tab then it should display on Modal screen so that user can edit it.
if he/she selects records 5, 8, 6 then records should be display in that particular order.
I google it but couldn't find any related posts.
Below is my HTML code:
<div ng-app="RecordApp" ng-controller="recordcontroller" class="container-fluid">
<div class="input-group">
<ul class="nav nav-tabs">
<li role="menu" class="active"><a href="#" data-toggle="tab" >User Data</a></li>
</ul>
<table class="table">
<thead>
<tr>
<th>
Select
</th>
<th>
Test1
</th>
<th>
Test2
</th>
<th>
Test3
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in Records | orderBy:SortBy:Reverse ">
<td>
<input type="checkbox" checked="checked" ng-model="record.Selected" ng-change="Checked(record)" />
</td>
<td>{{ record.Test1 }}</td>
<td>{{ record.Test2 }}</td>
<td>{{ record.Test3 }}</td>
</tr>
</tbody>
</table>
</div>
following is my AngularJs code for populating the navigation tab
$http.get(pageBaseUrl + "api/records").success(function (records) {
$scope.Records = records;
$scope.IsLoading = false;
});
Below is the code of Button and Modal screen:
<div class="input-group">
<button type="button" data-target="#editRecords" data-toggle="modal" class="btn btn-primary navbar-btn">
<span class="glyphicon glyphicon-floppy-disk"></span>
Edit Multiple Records
</button>
</div>
<div id="editRecords" class="modal" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h2>Edit Data For Selected Records </h2>
</div>
<div class="modal-body">
<table class="table-condensed table-striped">
<thead>
<tr>
<th>Test 1</th>
<th>Test 2</th>
<th>Test 3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in Records | orderBy:SortBy:Reverse">
<td><input type="text" class="form-control input-sm" /></td>
<td><input type="text" class="form-control input-sm" /></td>
<td><input type="text" class="form-control input-sm" /></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="SaveRecords();">Save Records</button>
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="UnmarkForEdition()">
Cancel
</button>
</div>
</div>
</div>
</div>
Thanks for the code, here is my solution,
JSFiddle Demo
Issues:
First I check if the object contains any selected checkboxes using the code.
$scope.checkCheckbox = function(){
return $filter('filter')($scope.Records, {Selected: true}).length === 0;
}
In the above code, I check the ng-repeat array if there is any object containing the property Selected:true, if there are none, then the length will be zero which using a comparator operator, I return a boolean. This is used by the HTML element button attribute ng-disabled and disables the input.
<button type="button" ng-disabled="checkCheckbox()" data-target="#editRecords" data-toggle="modal" class="btn btn-primary navbar-btn">
<span class="glyphicon glyphicon-floppy-disk"></span>
Edit Multiple Records
</button>
When the edit multiple records, button is clicked, I open the modal, and in the code I have added a simpleng-if` which will show only the inputs where the checkbox is selected!
<tr ng-if="record.Selected" ng-repeat="record in Records | orderBy:SortBy:Reverse">
<td><input type="text" class="form-control input-sm" /></td>
<td><input type="text" class="form-control input-sm" /></td>
<td><input type="text" class="form-control input-sm" /></td>
</tr>
Let me know if this fixes the issue.

How to change Add button to remove after adding in Angularjs

want to show only add button in first row ,
when i click add ,add new row and change or hide add button to remove.
continuously same. and first row should not remove and show add button
div ng-app="ReceiptsApp">
<div ng-controller="ReceiptsController">
<table class="tableData">
<tr ng-repeat="r in rvm">
<td>
<select ng-model="c" style="width:150px;height:22px;" ng-options="c.name for c in sample">
<option value="">--Select--</option>
</select>
</td>
<td>
<input type="text" lass="input-large" ng-model="c.Address" name="Address" />
</td>
<td>
<input type="text" class="input-large" ng-model="c.Mobile" name="Mobile" />
</td>
<td>
<button type="button" class="btn btn-default" ng-click="addRow($index,c)">Add</button>
</td>
<td>
<button type="button" class="btn btn-default" ng-click="deleteRow($index)">Remove</button>
</td>
</tr>
</table>
</div>
</div>
JS
var ReceiptsApp = angular.module('ReceiptsApp', []);
ReceiptsApp.controller('ReceiptsController', function ($scope) {
$scope.sample = [{
id: '1',
name: 'Bhanu',
Address: 'Moosapet',
Mobile: '9246100100'
}, {
id: '2',
name: 'Madhu',
Address: 'Uppal',
Mobile: '9000330653'
}, {
id: '3',
name: 'Geetha',
Address: 'Sanath Nagar',
Mobile: '9912340519'
}];
$scope.rvm = [{}];
$scope.addRow = function (index, c) {
if ($scope.rvm.length == (index + 1)) {
$scope.rvm.push({
});
}
}
$scope.deleteRow = function ($index) {
$scope.rvm.splice($index, 1);
}
});
i have posted code here
https://jsbin.com/yamobarapo/edit?html,js,output
A cheap & fast trick would be to make the Add button show only for the last element of ng-repeat like this:
<td ng-if="$last">
<button type="button" class="btn btn-default" ng-click="addRow($index,c)">Add</button>
</td>
<td ng-if="!$last">
<button type="button" class="btn btn-default" ng-click="deleteRow($index)">Remove</button>
</td>
I have also updated your JSBin to see it in action.

AngularJS Recursion in html table

ok i have this code:
<table class="table">
<thead>
<tr>
<th>
Description
</th>
<th>
Amount
</th>
<th>
Period
</th>
</tr>
</thead>
<tbody data-ng-repeat="expense in expenses">
<tr class="danger">
<td>
<button data-ng-if="expense.Children.length > 0 && expense.ShowChildren" type="button" class="btn btn-default btn-sm" ng-click="expense.ShowChildren = false">
<span class="glyphicon glyphicon-minus" aria-hidden="true" ></span>
</button>
<button data-ng-if="expense.Children.length > 0 && !expense.ShowChildren" type="button" class="btn btn-default btn-sm" ng-click="expense.ShowChildren = true">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
{{ expense.Description }}
</td>
<td>
{{ expense.Amount }}
</td>
<td>
{{ expense.Period }}
</td>
</tr>
<tr class="active" ng-show="expense.ShowChildren" data-ng-repeat="child in expense.Children">
<td>
    {{ child.Description }}
</td>
<td>
    {{ child.Amount }}
</td>
<td>
    {{ child.Period }}
</td>
</tr>
</tbody>
</table>
now i want to expense can have a child like u see in the photo
and this is work but when the child have child how I display that ?
i want to do the plus/minus button
I have been using a table from swimlane with much success lately. This is a feature that they support. This table is available here.
http://swimlane.github.io/angular-data-table/
You can do it, but you basically have to use expressions that insert the buttons where appropriate and ng-show/css to hide and display the rows when the buttons are clicked and a lot of other manual work.
I found a easy way to do it
Tree View: http://jsfiddle.net/brendanowen/uXbn6/8/
its better then other ways and more simple

How to enable only parent table raw items as editable?

When click on edit button (ng-click="editmode = !editmode") the entire table input showing. is there any solution to show that only show its <input type="text"> as editable ?
var app = angular.module('myapp', []);
app.controller('testController', function($scope) {
$scope.userdetails = {
"id": "1",
"user_id": "2",
"name": "Alycia",
"address": "510 Marks Parkway Suite 221\nLake Karelle, SC 01791",
"post": "Howellmouth",
"district": "Schaeferside",
"state": "New Mexico",
"pin": "61354-9529",
"phone": "(239)009-2861x858",
"mobile1": "+70(1)8058651903",
"mobile2": "+69(3)0049980344",
"file_id": "1",
"email1": "Diana11#Sipes.info",
"email2": "Dietrich.Georgianna#hotmail.com",
"created_at": "2015-08-04 11:41:56",
"updated_at": "2015-08-04 11:41:56"
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div ng-app="myapp" ng-controller="testController" class="container">
<table class="table table-hover table-responsive">
<tbody>
<tr>
<th>Name</th>
<td ng-if="!editmode">{{userdetails.name}}</td>
<td ng-if="editmode">
<input type="text" ng-model="userdetails.name">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
<tr>
<th>Address</th>
<td ng-if="!editmode">{{userdetails.address}}</td>
<td ng-if="editmode">
<input type="text" ng-model="userdetails.address">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
<tr>
<th>Post</th>
<td ng-if="!editmode">{{userdetails.post}}</td>
<td ng-if="editmode">
<input type="text" ng-model="userdetails.post">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
<tr>
<th>District</th>
<td ng-if="!editmode">{{userdetails.district}}</td>
<td ng-if="editmode">
<input type="text" ng-model="userdetails.district">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
<tr>
<th>State</th>
<td ng-if="!editmode">{{userdetails.state}}</td>
<td ng-if="editmode">
<input type="text" ng-model="userdetails.state">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
<tr>
<th>Pin</th>
<td ng-if="!editmode">{{userdetails.pin}}</td>
<td ng-if="editmode">
<input type="text" ng-model="userdetails.pin">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
<tr>
<th>Phone</th>
<td ng-if="!editmode">{{userdetails.phone}}</td>
<td ng-if="editmode">
<input type="text" ng-model="userdetails.phone">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
<tr>
<th>Mobile 1</th>
<td ng-if="!editmode">{{userdetails.mobile1}}</td>
<td ng-if="editmode">
<input type="text" ng-model="userdetails.mobile1">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
<tr>
<th>Mobile 2</th>
<td ng-if="!editmode">{{userdetails.mobile2}}</td>
<td ng-if="editmode">
<input type="text" ng-model="userdetails.mobile2">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editmode = !editmode"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
You should just give a different name on each part instead of "editmode" on every input :
<tr>
<th>Name</th>
<td ng-if="!editName">{{userdetails.name}}</td>
<td ng-if="editName">
<input type="text" ng-model="userdetails.name">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editName = !editName"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
<tr>
<th>Address</th>
<td ng-if="!editAdress">{{userdetails.address}}</td>
<td ng-if="editAdress">
<input type="text" ng-model="userdetails.address">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="editAdress = !editAdress"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
Hope it helped.
EDIT :
Here is an other proposition working in this plunker
If you manage a bit your $scope data you can have a lot less HTML to produce
The data would look like this :
$scope.userdetails = {
"id": {
value : "1",
label: "ID"
},
"user_id": {
value : "2",
label: "User Id"
},
"name": {
value : "Alycia",
label: "Name",
display: true
},
"address": {
value : "510 Marks Parkway Suite 221\nLake Karelle, SC 01791",
label: "Address",
display: true
},
"post": {
value : "Howellmouth",
label: "Post",
display: true
}
};
And the HTML Like this :
<table class="table table-hover table-responsive">
<tbody>
<tr ng-if="property.display" ng-repeat="property in userdetails">
<th>{{property.label}}</th>
<td ng-if="!property.editmode">{{property.value}}</td>
<td ng-if="property.editmode">
<input type="text" ng-model="property.value">
</td>
<td>
<button class="btn btn-default btn-xs" ng-click="property.editmode = !property.editmode"><span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
</table>

Resources