AngularJS controls are disables when adding a new record - javascript

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.

Related

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>

How can I change the innerHTML of div with a variable, inside the scope function in angular js?

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)
};
}

AngularJS ngrepeat refresh with post

First of all i'm new to AngularJS and stackoverflow so i'm very open minded. My problem is that i have a table that has 3 items that use the ng-blur directive to call a save function
UI
<div ng-controller="measureController">
<div class="jumbotron">
<h3>RatingYear</h3>
<select ng-model="ratingYear" ng-change="getMeasures()">
<option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>
</div>
<!-- this is going to be the container for each measure-->
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Measures for {{ratingYear}}</div>
<table class="table table-bordered table-hover">
<tbody>
<tr>
<th>Code</th>
<th>Name</th>
<th>Action</th>
<th>Active</th>
<th>Order</th>
</tr>
<tr ng-repeat="measure in measureList track by measure.MeasureId">
<td class="col-md-1">{{measure.Code}}</td>
<td class="col-md-5">{{measure.Name}}</td>
<td class="col-md-4"><textarea ng-model="measure.Action" ng-disabled="!measure.Active" ng-blur="save(measure)"></textarea></td>
<td class="col-md-1"><input type="checkbox" ng-checked="measure.Active" ng-model="measure.Active" ng-change="save(measure)" /></td>
<td class="col-md-1"><input class="form-control" ng-model="measure.Order" ng-disabled="!measure.Active" ng-blur="save(measure)" /> </td>
</tr>
</tbody>
</table>
</div>
</div>
Controller
function measureController($scope, $http) {
$scope.years = [2014,2015, 2016 ];
//get Measures Per Year
$scope.getMeasures = function () {
$http.get('/api/measure/' + $scope.ratingYear)
.success(function (data, status, headers, config) {
$scope.measureList = data;
$scope.$apply();
//$scope.loading = false;
})
.error(function () {
$scope.error = "An Error has occured while loading measures!";
$scope.loading = false;
});
};
//Edit Measure
$scope.save = function () {
$scope.loading = true;
var uMeasure = this.measure;
var active = uMeasure.Active ? 1 : 0;
$http.post('/api/measure/' + uMeasure.MeasureId + '/status/' + active, uMeasure)
.success(function (data, status, headers, config) {
$scope.measureList.push(data);
$scope.$digest();
})
.error(function (data,status, headers, config) {
alert("You failed misserably"+data);
});
};
}
I want to be able to refresh the measureList every time save has been called with the new object that has been inserted, that is the modify copy of the existing, right now is creating multiple copies of the same one in the database and i can only see it when i reload the page or change the value in ratingYear.
Thanks in advance

Changing JQuery function into AngularJS

I am changing a user list/table I made with Razor and JQuery into AngularJS. One of the features of this table was the ability to show/hide additional user details. The table had two sets of tr with the second one being display:none but would slide down/be visible when its above tr was clicked to show details.
Example (Original) Working Example
I tried to apply the code onto my AngularJS but it does not seem to work for some reason (no errors either)
Original Code (skeleton)
<table>
<tr class="col-xs-12">
<td class="col-xs-2">#Html.DisplayFor(modelItem => item.name)</td>
<td class="col-xs-2">#Html.DisplayFor(modelItem => item.email)</td>
// ect...
</tr>
<tr class="col-xs-12" style="display:none">
<td colspan="12">
<p>
#Html.DisplayFor(other stuff)
</p>
</td>
</tr>
</table>
New AngularJS Code
<table class="table table-striped col-xs-12">
<tbody ng-repeat="actors in Users">
<tr class="col-xs-12">
<td class="col-xs-2">{{actors.name}}</td>
<td class="col-xs-2">{{actors.email}}</td>
// ect...
</tr>
<tr class="col-xs-12" style="display:none">
<td colspan="6">
<p>
{{actors.otherThings}}
</p>
</td>
</tr>
</tbody>
</table>
JQuery (Original had td[colspan=12] instead of td[colspan=6])
<script>
// Toggle Additional Details
$(function () {
$("td[colspan=6]").find("p").hide();
$("td[colspan=6]").addClass("nopadding");
// && !$(e.target).is('span')
$("tr").click(function (e) {
if (!$(e.target).is('button') && !$(e.target).is('input') && !$(e.target).is('select')) {
var $target = $(this);
var $detailsTd = $target.find("td[colspan=6]");
if ($detailsTd.length) {
$detailsTd.find("p").slideUp();
$detailsTd.addClass("nopadding");
} else {
$detailsTd = $target.next().find("td[colspan=6]");
$detailsTd.find("p").slideToggle();
$detailsTd.toggleClass("nopadding");
}
}
});
});
</script>
CSS
/* Removes padding from interactive rows */
.table > tbody > tr > td.nopadding {
padding: 0px;
}
I am still new to AngularJS so maybe I am missing something simple, but I just want to be able to expand show/hide the additional tr. Not sure why it does not work for my Angular code.
AngularJS
var app = angular.module("app", ['ngRoute', 'ngResource']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/pages/home.html',
controller: 'HomeController'
})
.when('/home', {
templateUrl: '/pages/home.html',
controller: 'HomeController'
})
.when('/unknown', {
templateUrl: '/pages/unknown.html',
controller: 'UnknownController'
})
.otherwise({
templateUrl: '/pages/home.html',
controller: 'HomeController'
});
});
app.factory('userService', function ($http) {
var userService = {};
userService.getUsers = function () {
return $http({
url: '/API/APITest',
method: "GET"
})
}
return userService;
});
app.controller('HomeController', function ($scope, userService, $resource, $http) {
$scope.orderByField = 'name';
$scope.reverseSort = false;
$scope.ordering = "(ascending)";
$scope.orderByFieldFunction = function (value) {
$scope.reverseSort = !$scope.reverseSort;
$scope.orderByField = value;
if ($scope.reverseSort === false) {
$scope.ordering = "(ascending)";
} else {
$scope.ordering = "(descending)";
}
}
userService.getUsers().success(function (users) {
$scope.Users = users;
});
});
app.controller('UnknownController', function ($scope, userService, $resource, $http) {
$scope.title = "404 - Does Not Exist";
});
You can add the jQuery in a directive like this, if this is what you're after:
Example: http://jsfiddle.net/58mLfw6z/
AngularJS Directive
app.directive('showmore',function() {
return {
restrict:'A',
link: function(scope,element,attr) {
element.on('click',function() {
element.next('tr').toggle();
});
}
}
});
// or apply a flag to the model with an ng-click on the tr
$scope.more = function(actor) {
if (!actor.more) {
actor.more = true;
}
else {
actor.more = false;
}
};
HTML
<table>
<tbody ng-repeat="actors in Users">
<tr showmore ng-click="more(actors)">
<td class="col-xs-2">{{actors.name}}</td>
<td class="col-xs-2">{{actors.email}}</td>
</tr>
<tr style="display:none;">
<td colspan="2">
<p>
{{actors.otherThings}}
</p>
</td>
</tr>
</tbody>
</table>
I think OP already has found the answer. This post is just to say that ng-repeat has its own scope, an isolated scope.
In this plnkr, http://jsfiddle.net/aanders50/HB7LU/5497/, which OP posted in the comment
<table>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tbody ng-repeat="actors in Users">
<tr ng-click="showDetails = ! showDetails">
<td>{{actors.name}}</td>
<td>{{actors.email}}</td>
</tr>
<tr ng-show="showDetails" style="background-color:rgba(0, 255, 255, 0.2)">
<td colspan="2">
<p>birthday: {{actors.birthday}}</p>
</td>
</tr>
</tbody>
</table>
showDetails are bound to each tbody where ng-repeat is defined. Thus, each table has its own $scope.showDetails

Categories