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.
Related
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 class="table table-bordered">
<tbody>
<tr ng-repeat="playerOrTeam in template.editableTable track by $index">
<td style="text-align: center;" ng-repeat="playerOrTeamCat in playerOrTeam track by $index">
<input ng-model="playerOrTeamCat" type="text" class="form-control input-sm">
</td>
</tr>
</tbody>
</table>
template.editableTable is a multi dimensional array just filled with standard variables. when I change one of the values in the input box and then i look at the output of the template.editable table, i don't see the changes. Am I missing something obvious?
EDIT with more details because i'm getting no responses =\
//Template Class
app.factory('Template', function () {
var Template = function () {
/*
* Public Variables
*/
this.editableTable = someMultiDimensionalTable;
}
/*
* Functions
*/
Template.prototype.SeeEditableTableContents = function () {
console.log(this.editableTable);
}
}
//Main Controller
app.controller('MainController', function () {
$scope.template = new Template();
//etc
}
You cannot perform direct in-line modifications within ng-repeat. You can update your array entry using a function.
You'd want something like:
$scope.saveEntry = function (idx) {
console.log("Saving entry");
$scope.template.editableTable[idx] = angular.copy($scope.model.selected);
$scope.reset();
};
See JSFiddle for sample.
okay i actually got it to work so that i CAN make direct in-line modifications with ng-repeat by making my multidimensional table full of objects rather than soley a value.
so by doing that, i modified the table to look like this
<table class="table table-bordered">
<tbody>
<tr ng-repeat="playerOrTeam in template.editableTable track by $index">
<td style="text-align: center;" ng-repeat="playerOrTeamCat in playerOrTeam track by $index">
<input ng-model="playerOrTeamCat.value" type="text" class="form-control input-sm">
</td>
</tr>
</tbody>
</table>
got the idea looking here
Modifying objects within Angular Scope inside ng-repeat
First of all, sorry about the title, I just wan't sure how to word this question.
So I'm making a task manager using AngularJS. I have a form for the user to fill with the details when he's creating a new task. I use ng-model to save these values to my $scope. Here's how I save them:
$scope.add = function(tasks)
{
{
$scope.tasks.push({
'id': tasks.id,
'title': tasks.title,
'start_day': tasks.start_day,
'start_time':tasks.start_time,
'start_date':tasks.start_day + " " + tasks.start_time,
'end_day': tasks.end_day,
'end_time': tasks.end_time,
'end_date':tasks.end_day + " " + tasks.end_time,
'type': tasks.type,
'description': tasks.description
});
localStorage.setItem('tasks',JSON.stringify($scope.tasks));
}
};
Then, as you can see, I save these values to the local storage. I have an array called tasks with all the tasks the user created. I then display these tasks in a table with this:
<table id="datatable" class="display" ng-cloak>
<thead>
<tr>
<th><b>ID</b></th>
<th><b>Title</b></th>
<th><b>Start Date</b></th>
<th><b>End Date</b></th>
<th><b>Type</b></th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in tasks track by $index">
<td ng-click="details(task)">{{task.id}}</td>
<td ng-click="details(task)">{{task.title}}</td>
<td ng-click="details(task)">{{task.start_date}}</td>
<td ng-click="details(task)">{{task.end_date}}</td>
<td ng-click="details(task)">{{task.type}}</td>
<td><a ng-click="remove(task)" class="btn-floating waves-effect waves-light red<i class="material-icons">clear</i></a></td>
</tr>
</tbody>
</table>
Then, the objective is that you can click any row and load a new page with all the task details. I do this with the function details(), which has the following code:
$scope.details = function (task)
{
$window.location.href = 'table.html';
}
This loads the file table.html and what I want is to display in this page all the task details, i.e., the ID, the title, the description, etc.
What I don't know is how to only display the specific task that you click on. For example, if I click on the row with the task "Todo #1", I only want to see the details for the task "Todo #1".
to access this variable in other html you can use factory or service like this
(function() {
"use strict";
angular.module('dataModule',[])
.factory('datafactory',function(){
return {
};
});
})();
Now datafactory is factory we need to inject this module(dataModule) in your module and factory(datafactory) in controller
Now how to use this factory
in your function
$scope.details = function (task)
{
datafactory.currentTask =task
$window.location.href = 'table.html';
}
Now this datafactory stores your variable that can we used in any controller and later on also you can use this factory to store any such variable for global use
like this datafactory.Myvariable ="hasd"//assign here
Now to use this variable
Suppose you want to use this variable in another page table.html there on
// in html ng-init ="$scopeInit()"
in controller
$scopeInit =function(){
$scope.localTask =datafactory.currentTask
}
and use $scope.localTask
suppose html looks something like this
<div ng-controller ="my-controller" ng-init ="$scopeInit()">
<table id="datatable" class="display" ng-cloak>
<thead>
<tr>
<th><b>ID</b></th>
<th><b>Title</b></th>
<th><b>Start Date</b></th>
<th><b>End Date</b></th>
<th><b>Type</b></th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="task in tasks track by $index">
<td ng-click="details(task)">{{task.id}}</td>
<td ng-click="details(task)">{{task.title}}</td>
<td ng-click="details(task)">{{task.start_date}}</td>
<td ng-click="details(task)">{{task.end_date}}</td>
<td ng-click="details(task)">{{task.type}}</td>
<td><a ng-click="remove(task)" class="btn-floating waves-effect waves-light red<i class="material-icons">clear</i></a></td>
</tr>
</tbody>
</table>
<div>
//in controller
$scopeInit =function(){
$scope.task =datafactory.currentTask
}
//$scope.task contains required array and hence table can be created
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)
};
}
Caveat: I've just started with client side scripting and Angular JS is the first thing I'm learning and now I feel I should've started with javascript.
PS: I don't wanna use any third party libraries. I wanna learn to code.
Anyway,I have dynamic table which I want to make editable using content-editable=true attribute of HTML.
Problem: How to I get the edited data? whenever I click on submit and pass the this object to the check() function. I doesn't contain edited values. is there a possible way to pass only edited value if it's dirty. It has pagination so If g to the next page the edited values are gone. I know I've give unique Id to every td element with $Index concatenated to it. But I don't know how should I proceed.
Any help or guidance will be appreciated. Controllers and others are defined in my route.
<div>
<form ng-submit="check(this)">
<table class="table table-striped table-hover">
<tbody>
<tr ng-repeat="data in currentItems">
<td contenteditable="true >{{data.EmpNo}}</td>
<td contenteditable="true">{{data.isActive}}</td>
<td contenteditable="true">{{data.balance}}</td>
<td contenteditable="true">{{data.age}}</td>
<td contenteditable="true">{{data.eyeColor}}</td>
<td contenteditable="true">{{data.fname}}</td>
</tr>
</tbody>
<tfoot>
<td>
<div class="pagination pull-right">
<li ng-class="{'disabled': previousPage}">
<a ng-click="previousPage()" >Previous</a>
</li>
<li ng-repeat="page in pageLengthArray track by $index">
<a ng-click="pagination($index)">{{$index+1}} </a>
</li>
<li disabled="disabled">
<a ng-click="nextPage()" ng-class="{'disabled':nextPage}>Next </a>
</li>
</div>
</td>
</tfoot>
</table>
<input type="submit" value="Submit">
</form>
$scope.currentPage=0;
$scope.pageSize=10;
$scope.currentItems;
$scope.tableData;
$http.get('../json/generated.json').then(function(response){
$scope.tableData=response.data;
$scope.pageLength=Math.ceil($scope.tableData.length/$scope.pageSize);
$scope.currentItems=$scope.tableData.slice($scope.currentPage,$scope.pageSize);
$scope.pageLengthArray= new Array($scope.pageLength);
});
$scope.pagination=function(currentPage){ $scope.currentItems=$scope.tableData.slice($scope.pageSize*currentPage,$scope.pageSize*currentPage+$scope.pageSize);
$scope.currentPage=currentPage;
}
$scope.nextPage=function nextPage(argument) {
$scope.currentPage++; $scope.currentItems=$scope.tableData.slice(($scope.pageSize*$scope.currentPage),($scope.pageSize*($scope.currentPage)+$scope.pageSize));
}
$scope.previousPage=function previousPage(argument) {
$scope.currentPage--;
$scope.currentItems=$scope.tableData.slice(($scope.pageSize*$scope.currentPage),($scope.pageSize*($scope.currentPage)+$scope.pageSize));
}
In the usual case, you can not get a change model for contenteditabe because to change the model used ngModel.
But we can create a directive that we have updated the value of the model.
Live example on jsfiddle.
angular.module('ExampleApp', [])
.controller('ExampleController', function($scope, $timeout) {
$scope.data = {
EmpNo: "123"
};
})
.directive('contenteditable', function($timeout) {
return {
restrict: "A",
priority: 1000,
scope: {
ngModel: "="
},
link: function(scope, element) {
element.html(scope.ngModel);
element.on('focus blur keyup paste input', function() {
scope.ngModel = element.text();
scope.$apply();
return element;
});
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
<div ng-controller="ExampleController">
<table>
<tr>
<td ng-model="data.EmpNo" contenteditable="true"></td>
</tr>
</table>
<pre>{{data|json}}</pre>
</div>
</div>
I would store any object that gets modified in a seperate array using the ng-keyup directive. When the form is submitted, you will have an array of only elements which have been modified. You may have some UX issues if your pagination is done by server as when you change page and come back, it will show your old data, but hopefully this helps.
$scope.check = function () {
// check modifiedItems
console.log(modifiedItems);
};
// store modified objects in a seperate array
var modifiedItems = [];
$scope.modifyItem = function (data) {
// check if data has already been modified and splice it first
for(var i = 0, j = modifiedItems.length; i < j; i++) {
var currentItem = modifiedItems[i];
if (currentItem.id === data.id) {
modifiedItems.splice(i, 1);
break;
}
}
// add to modified
modifiedItems.push(data);
console.log('modifiedItems: ', modifiedItems);
};
HTML
<form ng-submit="check()">
<table class="table table-striped table-hover">
<tbody>
<tr ng-repeat="data in currentItems">
<td ng-repeat="(key, value) in data" contenteditable="true"
ng-keyup="modifyItem(data)">
{{data[key]}}
</td>
</tr>
</tbody>
<tfoot>
</table>
<input type="submit" value="Submit">
</form>