We Keep Coding

Why is my textbox not displaying data from AngularJS controller

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.

how to get all data using select all checkbox in table?

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>

table is not binding in angularjs

Hello everyone I am trying to bind a table in angulajs. I am getting data from database in table and trying to fill that table.
Here I did
$scope.getPageDetails = function () {
$http.get('/api/privilege/getpagedetails/')
.success(function (data, status) {
$scope.Page = data;
console.log($scope.Page);
}).error(function () {
});
}
then i get the data in $scope.Page which is defined as $scope.Page = []; here i am attaching the console image that i am getting data in $scope.page
and here is my table
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
ID
</th>
<th>
PageName
</th>
<th>
PageUrl
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Page in Pages">
<td>{{Page.id}}</td>
<td>{{Page.pageName}}</td>
<td>{{Page.pageUrl}}</td>
<td>
<input type="checkbox" value="Edit" />
</td>
</tr>
</tbody>
</table>
please help where I am missing I will be very thankful to you all.

In your view you are iterating over Pages, but I dont see it defined in your controller.
Change
$scope.Page = data;
to
$scope.Pages = [data];
Final Code
HTML:
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
ID
</th>
<th>
PageName
</th>
<th>
PageUrl
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Page in Pages">
<td>{{Page.id}}</td>
<td>{{Page.pageName}}</td>
<td>{{Page.pageUrl}}</td>
<td>
<input type="checkbox" value="Edit" />
</td>
</tr>
</tbody>
</table>
controller:
$scope.getPageDetails = function () {
$http.get('/api/privilege/getpagedetails/')
.success(function (data, status) {
$scope.Pages = [data];
}).error(function () {
});
}
EDIT: if your data is an object make it an array, so ng-repeat can iterate over it

$scope.getPageDetails = function () {
$http.get('/api/privilege/getpagedetails/')
.success(function (data, status) {
$scope.Pages = data; //change page to pages in whole code,
//no need to change any thing in html page
console.log($scope.Pages);
}).error(function () {
});
}

$scope.Page in controller vs Pages in your HTML ng-repeat binding, you need to write $scope.Pages :)

Change $scope.Page = data to $scope.Pages = data.

AngularJs : datatable is not working

I need to use Angularjs datatable for my project for the features like search and sorting etc.
My current structure is :-
HTML
<table datatable="" class="table table-striped table-bordered row-border hover" ng-show=query_executed>
<thead >
<tr >
<th ng-repeat="x in keys">{{x}}</th>
</tr>
</thead>
<tbody style="overflow-y: scroll;">
<div class="ScrollStyle">
<tr ng-repeat="y in myWelcome">
<td ng-repeat="z in y">{{z}}</td>
</tr>
</div>
</tbody>
</table>
Here keys contain column names.
y is rows and z is elements of rows.
JavaScript
$scope.GetQueryResult = function() {
$http.get('view2/datafile.html')
.success(function(data, status, headers, config) {
$rootScope.myWelcome = data[1]["result_text"]["data"][0]["chunk_data"];
$rootScope.colname = $rootScope.myWelcome[0];
var key, x;
$rootScope.keys = [];
for (key in $rootScope.colname) {
if ($rootScope.colname.hasOwnProperty(key))
($rootScope.keys).push(key);
}
})
.error(function(data, status, header, config) {
$rootScope.myWelcome = status;
});
};
But the problem is i am not getting required features described above.
Current page:-
view of my current page
I would like to know the problem with the code.
Thanks.

AngularJS controls are disables when adding a new record

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.