I have designed below pages using angularJs, there I am using routing and custom service
home.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="homeApp.js"></script>
</head>
<body>
<div ng-app="homeApp">
<div ng-controller="homeCtrl">
<div ng-view></div>
</div>
</div>
</body>
</html>
homeApp.js
var app = angular.module('homeApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider.
when('/dashBoard',{
templateUrl : 'dashBoard.html',
controller : 'homeCtrl'
}).when('/createCase',{
templateUrl : 'createCase.html',
controller : 'flatCtrl'
}).when('/submitCase',{
templateUrl : 'submitCase.html',
controller : 'flatCtrl'
}).otherwise({
redirectTo : '/dashBoard'
});
});
app.factory('homeService',function(){
var bean = {};
function set(data){
alert("service = "+data);
bean = data;
}
function get(){
return bean;
}
return{
set : set,
get : get
}
});
app.controller('homeCtrl',function($scope){
$scope.validateMe = function(isValid){
if(isValid){
alert("validated");
}
}
});
app.controller('flatCtrl', function($scope,$http,$window,homeService) {
$scope.loadLists = function(){
loadReviewTypes();
loadPriorities();
loadCamTypes();
};
loadReviewTypes = function(){
var onSuccess = function (dataRT, status, headers, config) {
$scope.reviewTypes = dataRT;
};
var onError = function (dataRT, status, headers, config) {
alert("failed");
}
$http({
method : 'POST',
url : 'secondHello?strParam=RT'
}).success(onSuccess).error(onError);
};
loadPriorities = function(){
var onSuccess = function (dataP, status, headers, config) {
$scope.priorities = dataP;
};
var onError = function (dataP, status, headers, config) {
alert("failed");
}
$http({
method : 'POST',
url : 'secondHello?strParam=P'
}).success(onSuccess).error(onError);
};
loadCamTypes = function(){
var onSuccess = function (dataC, status, headers, config) {
$scope.camTypes = dataC;
};
var onError = function (dataC, status, headers, config) {
alert("failed");
}
$http({
method : 'POST',
url : 'secondHello?strParam=C'
}).success(onSuccess).error(onError);
};
loadRatingTypes = function(id){
var onSuccess = function (dataP, status, headers, config) {
$scope.ratingTypes = dataP;
};
var onError = function (dataP, status, headers, config) {
alert("failed");
}
$http({
method : 'POST',
url : 'secondHello?strParam=R&id='+id
}).success(onSuccess).error(onError);
};
$scope.checkWord = function(msg){
$scope.ratingYear = msg-1;
};
$scope.chgRatingType = function(type){
if(type != '0'){
loadRatingTypes(type);
}else {
$scope.ratingTypes = [];
}
};
$scope.checkRatingYear = function(val1,val2){
if(val1 > val2){
alert('Rating year cannot be greater than Assessment year');
$scope.ratingYear=$scope.assessmentYear-1;
}
};
$scope.saveForm = function(){
var onSuccess = function (data, status, headers, config) {
alert(data);
$scope.messages = data;
};
var onError = function (data, status, headers, config) {
alert("failed");
}
alert(123);
$http({
method : 'POST',
url : 'secondHello'
}).success(onSuccess).error(onError);
};
$scope.form = {
};
$scope.postForm = function() {
console.log("posting data....");
alert("form.camNum = "+$scope.form.camNum);
formData = $scope.form;
console.log(formData);
/*$http({method : 'POST',
url : 'thirdHello',
data : JSON.stringify($scope.form)
}).success(function(){
alert("success form data");
}).error(function(){
});*/
$http({
method : 'POST',
url : 'thirdHello',
contentType: 'application/json',
data : JSON.stringify($scope.form)
}).success(function(data, status, headers, config){
alert("success form data ="+data);
homeService.set(data);
$scope.bean = homeService.get();
}).error(function(data, status, headers, config){
});
};
});
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById("flat"), ['flatApp']);
});
dashBoard.html
<div>
<form name ="formDm">
<table border="1">
<tr>
<td>
Party Name : <input type="text" ng-model = "formD.partyNm" name = "partyNm" ng-minlength="5" required>
<p ng-show="formDm.partyNm.$error.minlength">Please enter at least 2 char's</p>
</td>
</tr>
</table>
<!--New Case-->
<a type="submit" ng-href="#createCase">
<button ng-click="validateMe(formDm.$valid)" type="submit">New Case</button>
</a>
<p>{{bean}}</p>
</form>
</div>
createCase.html
<div id="flat" ng-controller = "flatCtrl" >
<form method="post" ng-init="loadLists()">
<div>
<table border="1">
<tr>
<td>
CAM No. : <input type="text" ng-model = "form.camNum" name = "camNum">
</td>
<td>
Party Name : <input type="text" ng-model = "form.partyNm" name = "partyNm">
</td>
</tr>
<tr>
<td>
Review Type : <select ng-model = "form.reviewType" name = "reviewType" ng-filter = "">
<option ng-repeat = "x in reviewTypes" value = "{{x.Id}}">
{{x.strName}}
</option>
</select>
</td>
<td>
Priority : <select ng-model = "form.priority" name = "priority">
<option ng-repeat = "x in priorities" value = "{{x.Id}}">
{{x.strName}}
</option>
</select>
</td>
</tr>
<tr>
<td>
CAM Type : <select ng-model = "form.camType" name = "camType" ng-filter = "" ng-change="chgRatingType(form.camType)">
<option ng-repeat = "x in camTypes" value = "{{x.Id}}">
{{x.strName}}
</option>
</select>
</td>
<td>
Rating Type : <select ng-model = "form.ratingType" name = "ratingType" ng-filter = "">
<option ng-repeat = "x in ratingTypes" value = "{{x.Id}}">
{{x.strName}}
</option>
</select>
</td>
</tr>
<tr>
<td>
Rating Year : <input type = "text" ng-model="form.ratingYear" ng-change="checkRatingYear(ratingYear,assessmentYear)">
</td>
<td>
Assessment Year : <input type = "text" ng-model = "form.assessmentYear" ng-keyup="checkWord(assessmentYear)">
</td>
</tr>
</table>
<a type="submit" ng-href="#submitCase">
<button ng-click="postForm()" type="submit">Submit</button>
</a>
</div>
<p>{{bean}}</p>
</form>
Back To DashBoard
</div>
submitCase.html
<div id="flat" ng-controller = "flatCtrl" >
{{homeService.get();}}
Back To DashBoard
</div>
here I am trying to do routing as well as form submission.
after getting root from dashboard page to cratecase page where I am submitting the form details to server and again getting JSON object from server which I want to display submitCase page.
At home.jsp I have bootstrapped angular with homeApp module.
and after getting routed to from dashboard to createcase I am adding one more app flatApp but submitCase page also has same app and controller still I am not able to populate values being set to bean object in homeService at submitCase page. Where I am making mistake? how do I bring submitCase page to current scope i.e. createCase page as I am able to print that bean object on createCase page after form submission Please help
Related
i am able to hit the controller method and able to return the data
[HttpPost]
public JsonResult GetAppsList()
{
var Apps = DataModel.ApplicationMasters.ToList();
return Json(new { appslist = Apps });
// return AppsList;
}
but in angular js not able to get the data
myApp.controller('SpicyController', ['$scope','$http', function ($scope,$http) {
$http({
method: 'POST',
url: 'Home/GetAppsList'
}).then(function (response) {
$scope.appslist = response.data.appslist; }, function (error) {console.log(error);});}]);
in view
<div class="main" ng-app="spiceApp">
<div ng-controller="SpicyController">
<table>
<tr ng-repeat="app in appslist">
<td>
{{app.Name}}
</td>
</tr>
</table>
</div>
</div>
can you help me why i am not able to display result?
<div class="main" ng-app="spiceApp">
<div ng-controller="SpicyController">
<table>
<tr ng-repeat="(index,data) in appslist">
<td>
{{data.Name}}
</td>
</tr>
</table>
</div>
</div>
applist is an Object . To Apply ng-repeat on an Object write this ng-repeat=(index,data) in applist.
myApp.controller('SpicyController', ['$scope','$http', function ($scope,$http) {
$http({
method: 'POST',
type:'json',
url: 'Home/GetAppsList'
}).then(function (response) {
$scope.appslist = response.data.appslist; }, function (error) {console.log(error);});}]);
It works now...
I GET array and stick name in input, then I change name in input and PUT it.
HTML
<form id="edit">
<table>
<tr>
<th>Name: </th>
<td>
<input id="name" form="edit" type="text" ng-model="name" required>
</td>
</tr>
</table>
<button ng-click="edit()">Submit</button>
</form>
AngularJS
$scope.display = function()
{
var connection = $http(
{
method: 'GET',
url: 'http://localhost:8080/students?id=' + $scope.id
})
.then(function(response)
{
$scope.myArray = response.data;
$scope.name = $scope.myArray[0].name;
})
You need to check the status_code on the response not on response.data:
if (response.status == 200)
{
success();
}
else
{
fail();
}
You should check your $scope.name properly update in controller when you hit the button. your request might be fail because of your $scope.name not update in controller properly.
Hi I am getting at console :
angular.js:10072ReferenceError: $document is not defined
at link (http://localhost:9999/CheckBoxOperation/:173:15)
at N
<table class="table table-bordered" arrow-selector="">
Actually I am trying to do arrow selection like this http://code.ciphertrick.com/2015/03/15/change-row-selection-using-arrows-in-ng-repeat/
I am getting that error because of code which is inside dashed line in my code. I think it is related to script but I didn't get.
This is my code:
AngularJS check box
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<script type="text/javascript">
var app = angular.module('formSubmit', []);
app.controller('FormSubmitController',[ '$scope', '$http', function($scope, $http)
{
$scope.headerText = ' Form';
$scope.selectedColor;
$scope.Levels=[]; //for checkbox name
$scope.Rows=[]; //for rows
$scope.selection=[];
$scope.selectedRow=0;
$http({method: 'GET', url: 'controller/getLevelCheckBox'}).
success(function(data, status, headers, config)
{
angular.forEach(data, function(value, key)
{
$scope.Levels.push(value);
});
})
// toggle selection for a given level by name
$scope.toggleSelection = function toggleSelection(levelName) {
var idx = $scope.selection.indexOf(levelName);
// is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// is newly selected
else {
$scope.selection.push(levelName);
$scope.getAllJobs = function()
{
var response = $http.get('controller/getDataTable/'+levelName);
response.success(function(data, status, headers, config)
{
angular.forEach(data, function(value, key)
{
$scope.Rows.push(value); //json Array valuessss
});
$scope.setClickedRow = function(index){
// window.alert("row clicked "+index);
$scope.selectedRow = index;
}
$scope.$watch('selectedRow', function() {
console.log('Do Some processing'); //runs the block whenever selectedRow is changed.
});
window.alert("sccusee");
});
response.error(function(data, status, headers, config)
{
alert("staus ::"+status);
});
}//getAllJobs()
}//else
};//toggle function
}]);//controller
app.directive('arrowSelector',function(){
return{
restrict:'A',
link:function(scope,elem,attrs,ctrl){
var elemFocus = false;
elem.on('mouseenter',function(){
elemFocus = true;
console.log(true);
});
elem.on('mouseleave',function(){
elemFocus = false;
console.log(false);
});
//--------------------------------------------------------------
$document.bind('keydown',function(e){
console.log("bind");
if(elemFocus){
if(e.keyCode == 38){
console.log(" 38 kjeeeey ::"+scope.selectedRow);
if(scope.selectedRow == 0){
return;
}
scope.selectedRow--;
scope.$apply();
e.preventDefault();
}
if(e.keyCode == 40){
if(scope.selectedRow == scope.Rows.length - 1){ return;
}
scope.selectedRow++;
scope.$apply();
e.preventDefault();
}
}
}); //till this point
}
};
});
</script>
</head>
<body data-ng-controller="FormSubmitController">
<h3>{{headerText}}</h3>
<div class=panel>
<div class="check-box-panel">
<div data-ng-repeat="level in Levels">
<div class="action-checkbox">
<input id="{{level}}" type="checkbox" value="{{level}}" data-ng-checked="selection.indexOf(level) > -1"
data-ng-click="toggleSelection(level)" />
<label for="{{level}}"></label>
{{level}}
</div>
</div>
<input type="submit" value="show all jobs " data-ng-click="get All Jobs()"/>
</div>
<div class="selected-items-panel">
<table class="table table-bordered" arrow-selector>
<thead>
<tr data-ng-repeat="(key,value) in Rows" data-ng-if="$last">
<td data-ng-repeat="(key,v) in value"><input type="button" value={{key}}></td>
</tr>
<tbody>
<tr data-ng-class="{'selected':$index == selectedRow}" data-ng-click="setClickedRow($index)"
data-ng-repeat="(key,value) in Rows">
<td data-ng-repeat="(key,v) in value">{{v}}</td>
</tr>
</tbody>
</table>
<div>
selectedRow = {{selectedRow}}
</div>
<div>
item = {{Rows[selectedRow]}}
</div>
</div>
</div>
</body>
</html>
You can use angular.element(document) to get the jquery equivalent
Some what new to the MEAN stack. Currently I'm reworking an small app I did through codeschool to be full MEAN stack.
The app created can be seen here
Code School app
In rewriting the app using the MEAN stack after submitting the form I must refresh the page to see the city added to the list. What do I need to fix so I don't need to refresh the page for the new Item to be added to the list?
If I'm missing any relevant code below here is my git hub link
git hub link
Here is my code:
angular.module('Cityapp').controller('CityIndexController', function(City, $scope){
$scope.cities = City.query();
window.sc = $scope;
});
angular.module('Cityapp').controller('CityCreateController', function(City, $scope, $http){
$scope.city = new City();
$scope.saveCity = function(city){
$http({
method: 'POST',
url: '/city',
data: city})
.success( function(data, status, headers, config){
console.log($scope.city);
console.log(data);
console.log($scope.city);
}).
error(function(data,status,headers,config){
jQuery('.alert').show();
console.log('nope');
});
};
});
<form ng-controller="CityCreateController">
<legend> New City</legend>
<input for="City-group" name="City" id="City" type="text" ng-model="city.city" placeholder="City Name">
<input for="City-group" name="desc" id="desc" type="text" ng-model="city.desc" placeholder="Description">
<input type="submit" class="btn btn-default" ng-click="saveCity(city)"/>
</form>
<ul ng-controller="CityIndexController" class="city-list">
<li ng-repeat="city in cities">
<a href="#">
{{city.city}}</a></li>
</ul>
It should looks something like that
;(function() {
function Cities($http) {
function City() {
}
City.prototype.save = function() {
return $http.post('/api/city', this);
};
City.cities = [];
City.add = function(city) {
city.save().then(function() {
City.cities.push(city);
});
};
City.getAll = function() {
$http.get('/api/cities').then(function(response) {
City.cities = response.data.map(function(data) {
return new City(data);
});
return cities;
});
};
return City;
}
function CityCreateController(Cities) {
var mv = this;
mv.city = new Cities();
mv.saveCity = function() {
Cities.add(mv.city);
};
}
function CityIndexController($scope, Cities) {
var mv = this;
$scope.$watchCollection(function() {
return Cities.cities;
}, function(cities) {
mv.cities = cities || [];
});
Cities.getAll();
}
angular
.module('app', [])
.factory('Cities', ['$http', Cities])
.controller('CityCreateController', ['Cities', CityCreateController])
.controller('CityIndexController', ['$scope', 'Cities', CityIndexController]);
})();
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<meta charset="utf-8">
</head>
<body ng-app="app">
<form ng-controller="CityCreateController as mv">
<legend> New City</legend>
<input for="City-group" name="City" id="City" type="text" ng-model="mv.city.city" placeholder="City Name">
<input for="City-group" name="desc" id="desc" type="text" ng-model="mv.city.desc" placeholder="Description">
<input type="submit" class="btn btn-default" ng-click="mv.saveCity()"/>
</form>
<ul ng-controller="CityIndexController as mv" class="city-list">
<li ng-repeat="city in mv.cities">
<a href="#">
{{city.city}}</a></li>
</ul>
</body>
</html>
Found a simple fix
angular.module('Cityapp').controller('CityCreateController', function(City, $scope, $http){
$scope.cities = City.query();
$scope.city = new City();
$scope.saveCity = function(city){
$http({
method: 'POST',
url: '/city',
data: city})
.success( function(data, status, headers, config){
$scope.cities.push({city: $scope.city.city,
desc: $scope.city.desc});
}).
error(function(data,status,headers,config){
jQuery('.alert').show();
console.log('nope');
});
};
});
Just added the
$scope.cities.push({city: $scope.city.city,
desc: $scope.city.desc});
to the .success. Works like it should. Now on to my next issue.
I am writing a small test page that retrieves some data from a RESTful API I have previously written.
I can successfully retrieve this data from Angular, but I can't seem to find a way to display this data on the page. I am trying to loop over the list of results and print it in a table.
This is my index.html:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf8" >
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
<script type="application/javascript" src="./js/URLSet.js"></script>
<script type="application/javascript" src="./js/app.js"></script>
</head>
<body ng-app="MyApp">
<div ng-controller="URLSetDAO as dao">
<button class="btn" ng-click="dao.list()">List</button>
<table class="table" ng-init="urlsets = dao.list()">
<td ng-repeat="urlset in urlsets">
<tr>
{{ urlset.pk }}
</tr>
<tr>
{{ urlset.user }}
</tr>
<tr>
{{ urlset.title }}
</tr>
<tr>
{{ urlset.views}}
</tr>
<tr>
{{ urlset.type }}
</tr>
</td>
</table>
</div>
</body>
</html>
This is the app.js:
(function() {
var app = angular.module('MyApp', ['URLSet']);
})();
And this is the URLSet.js:
(function() {
var app = angular.module('URLSet', []);
app.controller('URLSetDAO', ['$http', function($http){
var ip = "http://localhost:8000";
var store = this;
this.list = function() {
return $http({method: 'GET', url: ip + '/urlsets/'})
.success(function(data, status, headers, config) {
console.log(data);
})
.error(function(data, status, headers, config) {
});
};
this.read = function(id) {
$http({method: 'GET', url: ip + '/urlsets/' + id})
...
};
this.create = function(obj) {
$http({method: 'POST', url: ip + '/urlsets/'})
...
};
this.update = function(id, obj) {
$http({method: 'PUT', url: ip + '/urlsets/' + id})
...
};
this.remove = function(id) {
$http({method: 'DELETE', url: ip + '/urlsets/' + id})
...
};
}]);
})();
I understand that Promises work similarly to callbacks, so it's asynchronous. So how am I able to display this data, if ng-init will not wait for the function to finish?
EDIT:
Besides the fact that I inverted the tr and td tags (thanks to satish for suggesting Plunker, which pointed me this error), making the table render invisible (so I would never see the results on the page), I also injected $scope into my controller.
It is like this now:
...
app.controller('URLSetDAO', ['$http', '$scope', function($http, $scope){
var ip = "http://localhost:8000";
var store = this;
this.list = function() {
$http({method: 'GET', url: ip + '/urlsets/'})
.success(function(data, status, headers, config) {
$scope.urlsets = data;
})
.error(function(data, status, headers, config) {
});
};
...
And index.html:
<body ng-app="MyApp">
<div ng-controller="URLSetDAO as dao">
<button class="btn" ng-click="dao.list()">List</button>
<table class="table" ng-init="dao.list()">
<tr ng-repeat="urlset in urlsets">
<td>
{{ urlset.pk }}
</td>
<td>
{{ urlset.user }}
</td>
<td>
{{ urlset.title }}
</td>
<td>
{{ urlset.views}}
</td>
<td>
{{ urlset.type }}
</td>
</tr>
</table>
</div>
</body>
One way to solve this is to drop the ng-init and do that in your controller instead:
For example:
app.controller('URLSetDAO', ['$http', '$scope', function($http, $scope){
var ip = "http://localhost:8000";
var store = this;
this.list = function() {
return $http({method: 'GET', url: ip + '/urlsets/'})
.success(function(data, status, headers, config) {
console.log(data);
})
.error(function(data, status, headers, config) {
});
};
this.list().success(data) {
$scope.urlsets = data;
});
...
});
Hope this helps.