Hi I am trying to get all data at a time when I will click on
checkbox, but data not coming but when i click one by one data id
coming. But my problem is how to get all data in checkbox all in
single click.
This is HTML code
<div id="wrapper" class="wrapper">
<div ng-include="'views/partials/navigator.html'"></div>
<div class="page-content-wrapper">
<div ng-include="'views/partials/header.html'"></div>
<div class="row">
<div class="col-md-12">
<h3>Student Information</h3>
<table id="example" class="table">
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Siblling</th>
<th>select all <input type="checkbox" id="slctAllDuplicateStd"/></th>
</tr>
<tr ng-repeat="data in vm.data">
<td>{{data.name}}</td>
<td>{{data.mobileNumber}}</td>
<td>{{data.isMigrated}}</td>
<td><input type="checkbox" ng-model="data.selected" class="duplicateRow" /></td>
</tr>
<tr>
<tr>
<button class ="button" ng-click="vm.process()">Process</button>
</tr>
</table>
<table class="table">
<tr>
<td colspan="4">
<pagination ng-if="renderpagination" page-number='{{vm.pageNumber}}' page-count="{{vm.pageCount}}" total-records="{{vm.totalRecords}}" api-url="duplicate-student"></pagination>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
This is javascript code
(function() {
angular
.module('vidyartha-coordinator')
.controller('StudentDuplicateAccountController', StudentDuplicateAccountController);
StudentDuplicateAccountController.$inject = ['$scope', 'ApiService', '$routeParams', '$http', '$location', '$timeout'];
function StudentDuplicateAccountController($scope, ApiService, $routeParams, $http, $location, $timeout) {
var vm = this;
//console.log($routeParams)
var page = $routeParams.page || 1;
// vm.data = [];
ApiService.getAll('student-duplicate-account?pageCount=5&pageNumber=' + page).then(function(response) {
//console.log("response::"+JSON.stringify(response));
vm.data = response.data.records;
vm.pageNumber = response.data.pageNumber;
vm.totalRecords = response.data.totalRecords;
vm.pageCount = response.data.pageCount;
$scope.renderpagination = true;
});
$("#slctAllDuplicateStd").click(function () {
$(".duplicateRow").prop('checked', $(this).prop('checked'));
// console.log('data:::'+JSON.stringify(data));
});
vm.process = function() {
vm.duplicateArray = [];
angular.forEach(vm.data, function(data){
if (data.selected) {
console.log("true")
vm.duplicateArray.push(data.tenantId);
vm.duplicateArray.push(data.mobileNumber);
vm.duplicateArray.push(data.schoolId);
vm.duplicateArray.push(data.classId);
}
});
console.log(vm.duplicateArray)
}
}
})();
I need all data at a time we i do check and press process button.
So please tell me where i should add some condition.
Am not sure why you are mixing jquery here you can do it as follow
vm.selectAll =function(){
angular.forEach(vm.data, function(data){
data.selected=true;
}
then in your checkbox
<th>select all <input type="checkbox" ng-click="vm.selectAll()"/></th>
Related
In my application, I can verify that the correct info is being selected by using a console.log, but trying to display this info in a form textbox isn't working. Can someone please tell me what I'm doing wrong?
Here is me view's HTML.
<table class="table table-stripped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="organization in organizations | filter:search" data-ng-click="navToEdit($index)">
<td>{{organization.Id}}</td>
<td>{{organization.Title}}</td>
</tr>
</tbody>
</table>
Here is what clicking an item in that list takes you to.
<div class="form-group">
<label for="txtTitle">Title:</label>
<input type="text" type="text" id="txtTitle" class="form-control" data-ng-model="organization.Title" />
</div>
Here is my controller.
app.controller("organizationsCtrl", ["$scope", "$location", "$routeParams", "spService",
function ($scope, $location, $routeParams, spService) {
var listTitle = "Organizations";
$scope.editing = false;
//example populating Organizations
spService.getRecords(listTitle, "?$select=ID,Title").then(function (result) {
$scope.organizations = result;
});
$scope.navToAdd = function() {
$location.path("/organizations/add");
}
$scope.navToEdit = function(index) {
$scope.organization = $scope.organizations[index];
$location.path("/organizations/" + index);
console.log($scope.organization.Title);
}
}
]);
$scope.navToEdit does output the correct organization, but the textbox of txtTitle doesn't show anything.
Please help!!
As i see , the problem here is you are redirecting to another page here,
$location.path("/organizations/" + index);
which will clear the existing scope within the controller, if you want to transfer the data from one page to another use service or localStorage.
New to using Angular local storage and I am unable to store data in local storage after data in the table changes.
I have read their instructions and have got their demo working in my own environment, but that is watching for change when a user types a character into an input field. I need it to watch for change in the <tr>/<td> and then store it in local storage.
When I log the value that is passed to the function it returns `null'. The data that populates the table is dynamic, changing depending on what item a user clicks on. Any idea why the data that is loaded into the table isn't being stored?
UPDATE
Included the service in which I gather the data on ng-click. The id displays in the table cell but:
I have had to use an <input> inside the table cell
No data is binded to the cell at the moment, but it needs to be
When I refresh the page, the table headings are displayed, but the data still disappears
Storing each individual item isn't the most efficient approach
I will label the two html templates I have. First one (list-patents.htm) is the table which displays the items. When a user clicks on an item, a second template (patent-item.htm) below the table loads into ng-view displaying relevant information.
var app = angular.module('myApp', ['ngRoute', 'ui.router', 'LocalStorageModule']);
app.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', 'localStorageServiceProvider', function($stateProvider, $locationProvider, $urlRouterProvider, localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('demoPrefix')
$urlRouterProvider
.when('', '/patents/list-patents')
.when('/', '/patents/list-patents')
.when('/patents', '/patents/list-patents')
.when('/transactions', '/transactions/current-transactions')
.otherwise('/patents/list-patents');
$stateProvider
.state("patents", {
url: "/patents",
templateUrl: "templates/patents/patent-nav.htm",
controller: "patentListCtrl"
})
.state("patents.list", {
url: "/list-patents",
templateUrl: "templates/patents/list/list-patents.htm",
controller: "patentListCtrl"
})
.state("patents.list.item", {
url: "/patent-item",
templateUrl: "templates/patents/list/patent-item.htm",
params: {
//load of params
},
controller: "patentItemCtrl"
})
}];
app.factory('loadPatentItemService', ['$http', '$timeout', function($http, $timeout) {
var factory = {};
var selectedItem = null;
factory.select = function(item) {
factory.storeSelect = [];
selectedItem = item;
factory.storeSelect.push(selectedItem)
factory.getPatent();
return [selectedItem];
}
}])
app.controller('patentItemCtrl', ['$scope', 'patentTabService', 'patentCheckboxService', 'localStorageService', 'loadPatentItemService', function($scope, patentTabFactory, patentCheckboxService, localStorageService, loadPatentItemService){
var testid = loadPatentItemService.storeSelect[0].id;
$scope.$watch('itemStorage', function(){ //watch for change, value passed to function
localStorageService.set('itemStorage', testid); //set value of property (what user typed in)
$scope.localStorageDemoValue = localStorageService.get('itemStorage');
});
$scope.$watch(function(){
return localStorageService.get('itemStorage');
}, function(){
$scope.itemStorage = testid;
});
}])
list-patents.htm
<div class="row">
<div class="col-md-12">
<table>
<thead>
<tr>
<td class="align-middle">Application No. </td>
<td class="align-middle">Client Ref</td>
<td class="align-middle">Cost now</td>
<td class="align-middle">Cost band end</td>
<td class="align-middle">Cost next</td>
<td class="align-middle">Renewal Date</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in patents">
<td ng-click="select(x)"><a ui-sref="patents.list.item({id: x.id, patentApplicationNumber: x.patentApplicationNumber, clientRef: x.clientRef, renewalStatus: x.renewalStatus, currentRenewalCost: x.currentRenewalCost, costBandEndDate: x.costBandEndDate, renewalCostNextStage: x.renewalCostNextStage, renewalDueDate: x.renewalDueDate, shortTitle: x.shortTitle, primaryApplicantName: x.primaryApplicantName, patentPublicationNumber: x.patentPublicationNumber, title: x.title, filingDate: x.filingDate, epoPatentStatus: x.epoPatentStatus})">{{x.applicationNumber}}</a></td>
<td ng-bind="x.clientRef"></td>
<td ng-bind="x.currentRenewalCost">$</td>
<td ng-bind="x.costBandEndDate"></td>
<td ng-bind="x.renewalCostNextStage"></td>
<td ng-bind="x.renewalDueDate"></td>
</tr>
</tbody>
</table>
<div ui-view></div>
</div>
</div>
patent-item.htm
<div class="col-md-6 text-xs-center" ng-controller="patentItemCtrl">
<h2>Application Number</h2>
<table class="table table-striped">
<thead>
<tr class="font-weight-bold">
<td>applicationNumber</td>
<td>clientRef</td>
<td>renewalStatus</td>
<td>costBandEndDate</td>
<td>renewalCostNextStage</td>
<td>renewalDueDate</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in patentItem">
<td><input type="text" ng-model="itemStorage" placeholder="Start typing..." readonly></td>
<td><input type="text" ng-model="x.clientRef" placeholder="Start typing..." readonly></td>
<td ng-bind="x.renewalStatus"></td>
<td ng-bind="x.costBandEndDate"></td>
<td ng-bind="x.renewalCostNextStage"></td>
<td ng-bind="x.renewalDueDate"></td>
</tr>
</tbody>
</table>
</div>
I have 2 HTML pages. In my index.html page you can see products information that comes from JSON file. I need to have detail of product in detail.html page when people click on particular product. Alert can show the details but unfortunately the innerHTML of my <p> does not change, please guide me.
<div ng-app="myApp" ng-controller="AppController">
<div id="serachWrapper">
<h1 id="headerTopic">Our Products</h1>
<input id="searchInput" name="search" type="text" placeholder="Search products" ng-model="searchquery"/>
<table id="searchTable">
<thead id="tbHead">
<tr class="tbRow">
<th class="tbTopics">ID</th>
<th class="tbTopics">Name</th>
<th class="tbTopics">Color</th>
<th class="tbTopics">Type</th>
<th class="tbTopics">Capacity</th>
<th class="tbTopics">Price</th>
</tr>
</thead>
<tbody id="tbBody">
<tr class="tbRow" ng-repeat="x in myData | filter:searchquery ">
<td class="tbcontents" >{{x.id}}</td>
<td class="tbcontents">{{x.name}}</td>
<td class="tbcontents">{{x.color}}</td>
<td class="tbcontents">{{x.type}}</td>
<td class="tbcontents">{{x.capacity}}</td>
<td class="tbcontents">{{x.price}}</td>
</tr>
</tbody>
</table>
</div>
And this is my Angular js code:
var app = angular.module('myApp', ['ngSanitize']);
app.controller('AppController', AppController);
function AppController($scope , $http) {
$http.get("products.json").success(function(myData){
$scope.myData = myData;
$scope.go = function(item){
var detail = item.detail;
var productDetail = angular.element(document.getElementById('product-detail')).html();
productDetail = detail;
alert(detail)
};
});
}
You can keep both codes in the page and to solve this with an ng-if directive
Angular ng-if directive
<body ng-app="ngAnimate">
<label>Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /></label><br/>
Show when checked:
<span ng-if="checked" class="animate-if">
This is removed when the checkbox is unchecked.
</span>
</body>
Why is your $scope.go function defined inside the http.get request?
Try:
function AppController($scope , $http) {
$http.get("products.json").success(function(myData){
$scope.myData = myData;
});
$scope.go = function(item) {
var detail = item.detail;
var productDetail = angular.element(document.getElementById('product-detail')).html();
productDetail = detail;
alert(detail)
};
}
I have a input with an autocomplete with angularjs. This autocomplete is from a json that is represented by a table in a dropdown. I can filter the results and click the correct value but i would check if the user type some value that is not in the dropdown with an error message. Here is the code:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="uk-form-row uk-width-1-1" data-ng-repeat="items in inputList.getinputList">
<input ng-model='item.value' type="text" placeholder="Choose"/>
<!-- WORKS OK -->
<div class="uk-parent" data-uk-dropdown="{mode:'click'}">
Nav item - Works OK
<div class="uk-dropdown uk-dropdown-navbar" style="top:50px">
<table>
<thead>
<tr>
<th>First Value</th>
<th>Second Value</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="item in numberList.getList | filter:item.value" ng-click="setSelected(item)">
<td>{{item.first}}</td>
<td>{{item.last}}</td>
</tr>
</tbody>
</table>
</div>
</div>
The angularjs part
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.item={}
$scope.numberList={}
$scope.numberList.getList=[{'first':'Jon','last':'skeet'},{'first':'naeem','last':'shaikh'},{'first':'end','last':'game'}]
$scope.inputList={}
$scope.inputList.getinputList=[{'firstA':'AAA','lastB':'BBBB'}]
$scope.idSelectedVote = null;
$scope.setSelected = function (idSelectedVote) {
$scope.idSelectedVote = idSelectedVote;
$scope.item.value=idSelectedVote.first+' '+idSelectedVote.last;
//alert(idSelectedVote);
};
}
I created a fiddle here:
http://jsfiddle.net/8y48q/22/
You can use
<tr ng-show="(numberList.getList | filter:item.value).length == 0">
<td>Nothing here!</td>
</tr>
Fiddle
I'm learning AngularJS and I'm stuck on adding new records. I can open and edit/save existing records, but when I open my edit form to create a new record, all the controls are disabled (I can't type in the textboxes or select a value from a DDL). Here is my code:
Index.cshtml:
<script id="ModelList.html" type="text/ng-template">
<table>
<thead>
<tr>
<th>New Rate</th>
<th>Record ID</th>
<th>Company ID</th>
<th>Rate</th>
</tr>
</thead>
<tr ng-repeat="m in models">
<td>Edit</td>
<td><span ng-bind="m.Rid"></span></td>
<td><span ng-bind="m.CompanyId"></span></td>
<td><span ng-bind="m.Rate"></span></td>
</tr>
</table>
</script>
<script id="ModelSave.html" type="text/ng-template">
<form name="myForm">
<div>
<label>Company ID</label>
<select name="CompanyId" ng-model="model.CompanyId">
<option value="101">101</option>
<option value="102">102</option>
<option value="103">103</option>
</select>
</div>
<div>
<label>Rate</label>
<input name="WorkCompRt" ng-model="model.Rate"/>
</div>
<div>
<savebutton text="Save" action="save()"></savebutton>
<cancelbutton></cancelbutton>
</div>
</form>
</script>
.js:
.controller("RecordsListController", function ($scope, $routeParams, $location, State, Services) {
$scope.select = function (item) { State.broadcast(item); };
$scope.addNew = function() { $scope.models.splice(0,0,{ }); };
Services.getRecords().success(function (d) {
$scope.models = d;
});
})
.controller("ViewSaveController", function ($scope, $routeParams, $location, State, Services) {
$scope.select = function (item) { State.broadcast(item); };
$scope.addNew = function () { $scope.models.splice(0, 0, {}); };
Services.getRecord($routeParams.id).success(function (d) {
$scope.model = d;
});
})
.factory("Services", function (Api) {
this.getRecords = function(){
return Api.get("AppApi/GetRecords");
};
this.getRecord = function (rId) {
return Api.get("AppApi/GetRecordById?rId=" + rId);
};
return this;
})
So, I'm using the same form for creating and updating records; however, when rId is 0 (new item), the controls on the form are disabled. Any help is appreciated!
I found that Services.getRecord($routeParams.id) function prevents me from entering values in the controls. I created a separate controller for Adding a record that is the same as "ViewSaveController", except that I removed Services.getRecord($routeParams.id) function. It fixed the problem.