AngularJS Change UI not reflected in $scope for Firefox - angularjs

I'm using Firefox-42.0 and AngularJS v1.4.7.
HTML :
<div class="modal-body">
<p>Select user to share with from the list below.</p>
<div class="form-group">
<label for="">Search:</label>
<input type="text" class="form-control" ng-model="SharedSearchKey" ng-model-options="{ debounce: 600 }" />
</div>
<div class="modal-table" ng-show="usersToShare && usersToShare.length">
<table class="table table-striped table-responsive table-condensed">
<thead>
<tr>
<th>Name</th>
<th>User Name</th>
<th>View Only Tasks</th>
<th>Permission</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in usersToShare">
<td ng-bind="row.ContactName"></td>
<td ng-bind="row.UserName"></td>
<td>
<input type="checkbox" ng-model="row.TaskAssign" ng-init="row.TaskAssign=true" />
</td>
<td>
<select ng-model="row.permission" ng-init="row.permission='1'">
<option value="1">Readonly</option>
<option value="2">Write</option>
</select>
</td>
<td>
<input type="checkbox" ng-model="row.selected" ng-click="toggleSelectThisUser(row)" />
</td>
</tr>
</tbody>
</table>
</div>
JS in Controller :
$scope.toggleSelectThisUser = function (user) {
console.log(user);
};
When i change dropdown and click checkBox, it doesn't reflect in $scope. $scope contains the initial value. This problem occurs in Firefox. But it works fine in google chrome.

Related

having trouble with binding data back to the file

I'm new to angularJS and trying to update a row of data in the view but somehow it appears not to do anything. the goal is to render the new row of data into my table.
thanks a lot!
myBankApp.controller("displayClients",function($scope,$http){
$http.get('/data/clients.json').then(function(response){
$scope.list= response.data;
});
$scope.addClient=function(){
$scope.list.push({
name: $scope.client.name,
lastName: $scope.client.lastName,
bankAccountNumber: $scope.client.bankAccountNumber,
balance:$scope.client.balance
})
$scope.client.name="";
$scope.client.lastName="";
$scope.client.bankAccountNumber="";
$scope.client.balance="";
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller="displayClients">
<table>
<tr>
<th>first name</th>
<th>last name</th>
<th>account number</th>
<th>balance</th>
</tr>
<tr ng-repeat= " x in list">
<td> {{x.name}}</td>
<td> {{x.lastName}}</td>
<td> {{x.bankAccountNumber}}</td>
<td> {{x.balance}}</td>
</tr>
</table>
</div>
<br>
<form ng-submit="addClient() ng-controller="displayClients"">
<input type="text" placeholder="name" ng-model="client.name"/>
<input type="text" placeholder="lastName" ng-model="client.lastName"/>
<input type="text" placeholder="account" ng-model="client.bankAccountNumber"/>
<input type="text" placeholder="balance" ng-model="client.balance"/>
<input type="submit" value="add client">
</form>

Smart table reset / refresh on input field search does not load the original data

When refreshing the table data with search input field, it displays table data with the last search input field value.
How can I remove the filter on the click of the refresh/clear button and get the original data?
Please find the page view GUI
$scope.Refresh = function () {
$scope.searchall="";
$scope.DataLoad();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<button type="button" class="btn-sm btn-default" ng-click="Refresh()">Refresh</button>
<div>
<select autocomplete="off" style="width: 60px;" ng-model="CountPerPage"
ng- options="x for x in CountPerPageOptionValues">
<option value="">All</option>
</select>
</div>
<table ng-show="DataLoaded" st-table="Collection" class="table table-striped animate-show" st-safe-src="data" >
<thead>
<tr>
<th st-sort="Id">ID</th>
<th st-sort="Name">Name</th>
<th st-sort="Timestamp" style="min-width:68px;">Timestamp</th>
<th st-sort="Message" style="min-width:136px;">Message</th>
</tr>
<tr>
<th>
<input ng-model="searchall" ng-show="!nomsg" st-search="Name" placeholder="search for Name" class="input-sm form-control" style="width:140px" type="search" />
</th>
</tr>
</thead>
<tbody data-ng-hide="isLoading" data-ng-animate="'fade'">
*emphasized text*<tr ng-repeat="latestData in Collection">
<td>{{latestData .Id}}</td>
<td>{{latestData .Name}}</td>
<td>{{latestData .Timestamp | date:'dd MMM yyyy hh:mm:ss a'}}</td>
<td>
{{latestData.Message}}
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="CountPerPage" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>

angular smart table - pagination doesn't work on refreshing data object

I'm using angular-smart-table, where I'm able to display my data correctly with pagination.
And I do add new records/ update existing records on the same page. Here's the screenshot for reference -
But here, I'm facing problems with pagination after adding a new record/ updating existing one. That is on refreshing an object, it doesn't consider pagination and shows all records on same page at once.
Here is my controller code -
$scope.smartTablePageSize = 10;
$scope.rowsPerPage = [5, 10, 15, 20, 25];
// my function to add a new record
vm.insertAccount = function() {
if(vm.validateAll())
$http({
method: 'POST',
url: addAccountUrl,
data: vm.accountInfo,
headers: { 'Content-Type': 'application/json' }
}).then(function(success) {
vm.getAllAccountsData(); // refreshing data object
}, function(error) {
});
}
// function to refresh data object
vm.getAllAccountsData = function() {
$http.get(accountListUrl)
.then(function(success) {
if (success.data) {
vm.allAccountsData = success.data; // updating data here
}
}, function(error) {
})
}
And the respective HTML -
<div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-xs-12 form-inline form-group mt-20">
<label for="rows">Rows on page</label>
<select class="form-control show-tick" id="rows" title="Rows on page" selectpicker ng-model="smartTablePageSize" ng-options="i for i in rowsPerPage">
</select>
</div>
<table class="table mt-20 mb-20" ng-if="vm.allAccountsData.length > 0" st-table="vm.allAccountsData">
<thead class="sortable">
<tr>
<th class="table-id" st-sort="id" st-sort-default="true">#</th>
<th st-sort="accounttype">Account Type</th>
<th st-sort="vendor">Vendor</th>
<th st-sort="accountnumber">Account No.</th>
<th st-sort="paymentmode">Payment Mode</th>
<th st-sort="ponumber">PO No.</th>
<th st-sort="vendorcode">Vendor Code</th>
<th st-sort="costcenter">Cost Center</th>
<th st-sort="glcode">GL Code</th>
<th>Action</th>
</tr>
<tr>
<th></th>
<th>
<input st-search="accounttype" placeholder="Search Account Type" class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="vendor" placeholder="Search Vendor" class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="accountnumber" placeholder="Search Account No." class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="paymentmode" placeholder="Search Payment Mode" class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="ponumber" placeholder="Search PO No." class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="vendorcode" placeholder="Search Vendor Code" class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="costcenter" placeholder="Search Cost Center" class="input-sm form-control search-input" type="search" />
</th>
<th>
<input st-search="glcode" placeholder="Search GL Code" class="input-sm form-control search-input" type="search" />
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.allAccountsData">
<td class="table-id">{{item.index + 1}}</td>
<td>{{item.accounttype}}</td>
<td>{{item.vendor}}</td>
<td>{{item.accountnumber}}</td>
<td>{{item.paymentmode}}</td>
<td>{{item.ponumber}}</td>
<td>{{item.vendorcode}}</td>
<td>{{item.costcenter}}</td>
<td>{{item.glcode}}</td>
<td>
<button class="btn btn-info editable-table-button btn-xs" ng-click="vm.editAccount(item);">View/Edit</button>
<button class="btn btn-danger editable-table-button btn-xs" ng-click="vm.confirmDeleteAccountModal('app/pages/utilities/pdfNormalizer/confirm-delete-account.html', 'sm', item)">Delete</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="10" class="text-center">
<div st-pagination="" st-items-by-page="smartTablePageSize" st-displayed-pages="10"></div>
</td>
</tr>
</tfoot>
</table>
</div>
So, on refreshing object, What I expect is the similar table with pagination as shown above. And What I'm getting is the table with all records without considering pagination -
I struggled a bit and found an answer! We can use st-safe-src directive on angular-smart-table.
I used it as -
<table class="table mt-20 mb-20" st-table="allAccountsData" st-safe-src="vm.allAccountsData">
Where, allAccountsData is a temporary data object & vm.allAccountsData is an actual one.
Then, I iterated over allAccountsData as -
<tr ng-repeat="item in allAccountsData">
That's it! No any changes in controller code!

How do we get already initialize value in another checkbox

here is my html code;
I want to fetch value of first checkbox which is already initialize and the by selecting another checkbox i can get value of first one
<div class="widget-body" style="display: block;">
<div class="widget-main">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>item</th>
<th>issued</th>
<th>received</th>
</tr>
</thead>
<tbody ng-repeat="emp in nodueitassets">
<tr>
<td>{{emp}}</td>
<td>
<input type="checkbox" value="{{emp}}" ng-model="checked" ng-init="checked=true" />
</td>
<td>
<input type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
JS CONTROLLER

Angular js: error message get displayed utill page load completes?

I have created the simple login form and perform the validation on it but the problem is that validation is occur during the page load.My oode here.
<body ng-controller="myCont">
<form name="myForm" novalidate>
<h2 align="center">Add The Item Here</h2>
<table align="center" border="2">
<div class="control-group">
<div class="controls">
<tr>
<td>pid</td>
<td><input type="number" name="pid" ng-model="user.pid" ng-maxlength="3" required="pid" ></td>
<td ng-show="myForm.pid.$touched && myForm.pid.$invalid"></td>
<td ng-show="myForm.pid.$error.required" style="color:red">Enter Pid</td>
<td ng-show="myForm.pid.$error.maxlength" style="color:red">Only 3 digits for pid</td>
</tr>
<tr>
<td>pname</td>
<td><input type="text" name="pname" ng-model="user.pname" required="pname"></td>
<td style="color:red" ng-show="myForm.pname.$touched && myForm.pname.$invalid"></td>
<td ng-show="myForm.pname.$error.required" style="color:red">Pname is required.</td>
</tr>
<tr>
<td>pcost</td>
<td><input type="number" name="pcost" ng-model="user.pcost" required="pcost"></td>
<td style="color:red" ng-show="myForm.pcost.$touched && myForm.pcost.$invalid">
<td ng-show="myForm.pcost.$error.required" style="color:red">Pcost is required.</td>
</tr>
<div ng-repeat="x in result track by $index"></div>
<tr>
<td>AddData<input type="submit" ng-disabled="myForm.$invalid" ng-click="addAll()">
</td>
<td><input type="reset" name="reset" value="reset"></td>
</tr>
</div>
</div>
</table>
</form>
</body>
enter image description here
try angular-toastr for notification of wrong credentials or error message...
Hope it will help out

Resources