ng-model value undefined - javascript

I got undefined inside my ng-model. I already defined inside my controller. $scope.rule.message no issue but for $scope.rule.ruleId got undefined.
html
<form>
<div class="form-group">
<label>Group</label> <select ng-model="rule.ruleId" ng-repeat="rule in rules">
<option value="{{rule.ruleId}}">
#{{rule.keyword}}
</option>
</select>
</div>
<div class="form-group">
<label>Message</label>
<textarea class="form-control" cols="" name="" rows="" ng-model="rule.message">
</textarea>
</div>
<div class="form-group">
<button class="btn btn-default" type="submit" ng-click="create()">Save</button>
</div>
</form>
js
mzsmsControllers.controller('MemberBlastCreateCtrl', ['$scope', '$http',
'$location',
function($scope, $http, $location) {
$scope.rule = {};
$http({
method: 'GET',
url: 'http://example.com/get_all_rules.php?fbId=' + sessionStorage.id
}).
success(function(data, status, headers, config) {
$scope.rules = data.rules;
}).
error(function(data, status, headers, config) {
alert("No internet connection.");
});
$scope.create = function() {
$http({
method: 'GET',
url: 'http://example.com/create_blast.php?fbId=' + sessionStorage.id +
'&ruleId=' + $scope.rule.ruleId + '&message=' + $scope.rule.message
}).
success(function(data, status, headers, config) {
alert(JSON.stringify(data));
alert("SMS Blast successfuly created.");
$location.path("/member/blast");
}).
error(function(data, status, headers, config) {
alert("No internet connection.");
});
}
}
]);


I guess the problem is that ng-repeat creates a new scope, try changing the ng-repeat:
<select ng-model="rule.ruleId" ng-repeat="r in rules">
<option value="{{r.ruleId}}">
#{{r.keyword}}
</option>
</select>

Related

Cannot read property 'username' of undefined in angularjs

i want make a login with angularjs and ionic. but when i run this program, this program is error. the error is :
TypeError: Cannot read property 'username' of undefined
anyone help me?
form :
<body ng-app="apps" ng-controller="PostController as postCtrl">
<ion-view view-title="Please Sign in">
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Name" ng-model="postCtrl.inputData.username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="postCtrl.inputData.password">
</label>
</div>
<div class="alert alert-danger" role="alert" ng-show="errorMsg">{{errorMsg}}</div>
<button class="button button-full button-balanced" ng-click="postForm()">Sign In</button>
</ion-content>
</ion-view>
<script src="controller.js"></script>
</body>
controller :
angular.module('apps', ['ionic'])
.controller('PostController', ['$scope', '$http', function($scope, $http) {
$scope.postForm = function() {
var encodedString = 'username=' +
encodeURIComponent(this.inputData.username) +
'&password=' +
encodeURIComponent(this.inputData.password);
$http({
method: 'POST',
url: 'check-login.php',
data: encodedString,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data, status, headers, config) {
console.log(data);
if ( data.trim() === 'correct') {
window.location.href = 'home.html';
} else {
$scope.errorMsg = "Login not correct";
}
})
.error(function(data, status, headers, config) {
$scope.errorMsg = 'Unable to submit form';
})
}
}]);

In your controller do
var self = this;
self.inputData = {};
And replace
this.inputData.username with self.inputData.username
this.inputData.password with self.inputData.password

I tried a sample. Look at this
$scope.inputData = {
username: null,
password: null
}
http://jsfiddle.net/JKBbV/1179/

You can just do it in the angular way, like below.. that should be the correct purpose of using ng-model..
The Form:
<body ng-app="apps" ng-controller="PostController as postCtrl">
<ion-view view-title="Please Sign in">
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Name" ng-model="username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="password">
</label>
</div>
<div class="alert alert-danger" role="alert" ng-show="errorMsg">{{errorMsg}}</div>
<button class="button button-full button-balanced" ng-click="postForm()">Sign In</button>
</ion-content>
</ion-view>
<script src="controller.js"></script>
</body>
controller :
angular.module('apps', ['ionic'])
.controller('PostController', ['$scope', '$http', function($scope, $http) {
$scope.username="";$scope.password:"";
$scope.postForm = function() {
var encodedString = 'username=' +
encodeURIComponent($scope.username) +
'&password=' +
encodeURIComponent($scope.username);
$http({
method: 'POST',
url: 'check-login.php',
data: encodedString,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data, status, headers, config) {
console.log(data);
if ( data.trim() === 'correct') {
window.location.href = 'home.html';
} else {
$scope.errorMsg = "Login not correct";
}
})
.error(function(data, status, headers, config) {
$scope.errorMsg = 'Unable to submit form';
})
}
}]);

Data passing through controller in REST api

I am new in Ionic and angularjs. I am trying to fetch login (ng-model) data (email&password) from signin.html page, and calling API with POST method.But it doesn't call api. I spent couple of days for this. Please help me!
html
<ion-view view-title="login">
<ion-component>
</br>
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="First Name" ng-model="login.firstname">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="login.password">
</label>
<label class="item item-input">
<input type="text" placeholder="E-mail" ng-model="login.email">
</label>
<button class="button button-block button-balanced" data-ng-click="submit(login)">
Login
</button>
<button class="button icon-left button-block ion-social-facebook button-positive">Login Facebook</button>
<button class="button icon-left button-block ion-social-googleplus button-assertive">Login Google+</button>
<a ng-href="#/signup"><button class="button button-clear button-positive">SignUp
</button></a>
</div>
</ion-component>
</ion-view>
app.js
var app=angular.module('starter', ['ionic','ngCordova'])
app.controller('loginCtrl', function($scope,$http){
$scope.data=[];
// $scope.logindata = {};
// console.log (login);
$scope.login={};
//****login submit****
$scope.submit=function(login){
console.log(login);
$scope.logincontet=console.log('logindata:'+login);
//***api call***
var local1='json={"method_name":"login","body":{"login_with":"2","facebook_id":"","email":';
var local2=',"name":"",';
var local3='"password":';
var local4='}}';
var req =
{
method: 'POST',
url: "http://192.168.1.23/projects/veterinary/webservice/main.php",
//data: 'json={"method_name":"login","body":{"login_with":"2","facebook_id":"","email":"$scope.login.email","name":"","password":"$scope.login.password"}}',
data:local1 + $scope.login.email + local2 + local3 + $scope.login.password +local4,
headers: {"Content-Type": "application/x-www-form-urlencoded"}
};
$http(req).success(function(data, status, headers, config)
{
console.log('Success',data);
$scope.data=data.data;
//success
})
.error(function(data, status, headers, config)
{
console.log('Error');
});//error
//*********
window.location.href = "#/success.html";
}
//*****
//****login api call****
});

app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('login', {
url: "/login",
templateUrl: "templates/login.html",
controller: 'loginCtrl'
})
.state('signup', {
url: "/signup",
templateUrl: "templates/signup.html",
controller: 'signupCtrl'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
*********************
Binding view and controller!

Finally I created post api string with this...
data: 'json={"method_name":"login","body":{"login_with":"2","facebook_id":"","email":"'+$scope.login.email+'" ,"name":"","password":"'+$scope.login.password+'"}}',

Angularjs Modal window implementation in my application

I need to implement modal window for my application but I am not able to do it, I saw multiple examples on net for the same but still, not able to get it proper in my application. I tried to replicate this plunker example in my application http://plnkr.co/edit/M35rpChHYThHLk17g9zU?p=preview
I am getting $modal.open() problem is javascript console as it is not able to read property "Cannot read property 'open' of undefined
at Scope.open"
Below is my code for the same.
app.js
(function() {
var app = angular.module('app', ['ui.bootstrap', 'ngFileUpload', 'bootstrap.fileField','angularUtils.directives.dirPagination','ui.router','ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/newMember', {
templateUrl: 'resources/templates/onBoard.jsp',
controller: 'onBoardCtrl'
})
.when('/toBeInitiated', {
templateUrl: 'resources/templates/toBeInitiated.jsp',
controller: 'tobeinitiatedCtrl'
})
.when('/initiated', {
templateUrl: 'resources/templates/initiated.jsp',
controller: 'initiatedCtrl'
})
.when('/pending', {
templateUrl: 'resources/templates/pendingWithFadv.jsp',
controller: 'pendingFadvCtrl'
})
.when('/inProgress', {
templateUrl: 'resources/templates/inProgress.jsp',
controller: 'inProgressCtrl'
})
.when('/completed', {
templateUrl: 'resources/templates/completed.jsp',
controller: 'completedCtrl'
})
.when('/accessList', {
templateUrl: 'resources/templates/accessList.jsp',
controller: ''
})
.when('/dataUpload', {
templateUrl: 'resources/templates/dataUpload.jsp',
controller: ''
})
.otherwise({redirectTo: '/'});
}]);
app.controller('uploadTestCtrl1',['$scope','$http',function($scope, $http){
$scope.loading = true;
$scope.doUpload = function(){
//console.log('title',$scope.title);
$scope.loading = true;
var file1 = $scope.uploadFile
//var file = $scope.myFile
console.log('uploadFile',$scope.uploadFile);
//console.log('uploadFile',$scope.myFile);
//alert('Upload Initiated');
//create form data object
var fd = new FormData();
//var file =$scope.myFile;
//console.log('file is ' + JSON.stringify(file));
fd.append('title',$scope.title);
fd.append('file', file1);
//console.dir(fd);
//send the file / data to your server
$http.post('continueFileUpload', fd, {
withCredentials : false,
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function(data){
$scope.loading = false;
//do something on success
console.log("success");
alert("Data Saved Successfully");
}).error(function(data, status, headers, config){
//do something on error
$scope.loading = false;
alert(data.message);
console.log("failed");
})
}
}]);
app.controller('uploadTestCtrl',['$scope','$http',function($scope, $http){
$scope.doUpload = function(){
//console.log('title',$scope.title);
var file1 = $scope.uploadFile
//var file = $scope.myFile
console.log('uploadFile',$scope.uploadFile);
//console.log('uploadFile',$scope.myFile);
//alert('Upload Initiated');
//create form data object
var fd = new FormData();
//var file =$scope.myFile;
//console.log('file is ' + JSON.stringify(file));
fd.append('title',$scope.title);
fd.append('file', file1);
//console.dir(fd);
//send the file / data to your server
$http.post('continueFileUpload1', fd, {
withCredentials : false,
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function(data){
//do something on success
console.log("success");
alert("Data Saved Successfully");
}).error(function(data, status, headers, config){
//do something on error
alert(data.message);
console.log("failed");
})
}
}]);
app.controller('AppController',function ($scope) {
$scope.name = "Admin";
});
app.controller('onBoardCtrl',['$scope','$http',function($scope, $http){
$scope.empList = [];
$scope.addemp = {};
$scope.createFailed=false;
$scope.saveEmp = function(){
$scope.empList.push($scope.addemp);
$http({
url: 'onBoardSubmit',
method: "POST",
data: JSON.stringify({empId: $scope.addemp.empId, empName: $scope.addemp.empName, empEmail: $scope.addemp.empEmail, empProgramName: $scope.addemp.empProgramName}),
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.createFailed=false;
alert("Data Saved Successfully");
$scope.reset();
}).error(function (data, status, headers, config) {
console.log("failed");
$scope.createFailed=true;
$scope.error=data.message;
alert(data.message);
});
};
$scope.reset = function() {
$scope.addemp = {};
$scope.onboardform.$setPristine();
}
}]);
app.controller('tobeinitiatedCtrl',['$scope','$http',function($scope, $http,$modal){
$scope.initiate=[];
$scope.names=[];
$scope.action='initiate';
//alert("tobeinitiated");
$scope.toBeInitiatedOnLoad = function(){
$scope.loading = true;
//alert($scope.id);
$http({
url: 'toBeInitiated',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.loading = false;
//$scope.initiate = angular.copy(data);
//$scope.initiate.push(data);
$scope.names=data;
//$scope.initiate = angular.copy($scope.names);
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
$scope.toggleSelection=function toggleSelection(x,conf,initiate,initiatedFor){
alert("change");
//$scope.initiate=[];
var idx = $scope.names.indexOf(initiatedFor);
alert(idx);
if (conf)
{
$scope.initiate.push(x);
//alert($scope.initiate[0].empName);
}
else
{
//var idx1 = initiate.indexOf(x.initiatedFor);
for (var i=0;i<initiate.length;i++)
{
if (angular.equals(initiate[i],x))
initiate.splice(i,1);
}
//alert("false");
}
};
$scope.open = function open () {
alert("Hi");
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl
});
};
$scope.resendIntitate = function(){
//$scope.name={};
var index = 0;
$scope.initiate.forEach(function (name) {
console.log('rows #' + (index++) + ': ' + JSON.stringify(name));
});
/*var data ={
initiatedFor : $scope.name.initiatedFor
}*/
alert(JSON.stringify($scope.initiate));
//alert(JSON.stringify($scope.initiate));
$http({
url: 'fromInitiated',
method: "POST",
data:JSON.stringify($scope.initiate),
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
//$scope.loading = false;
//$scope.initiate = angular.copy(data);
//$scope.initiate.push(data);
//$scope.names=data;
//$scope.initiate = angular.copy($scope.names);
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
}]);;
app.controller('ModalInstanceCtrl',function ($scope, $uibModalInstance, items) {
});
app.controller('initiatedCtrl',['$scope','$http',function($scope, $http){
$scope.names=[];
$scope.initiatedOnLoad = function(){
$http({
url: 'initiated',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.names=data;
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
}]);
app.controller('pendingFadvCtrl',['$scope','$http',function($scope, $http){
$scope.names=[];
$scope.pendingFadvOnLoad = function(){
$http({
url: 'pendingWithFadv',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.names=data;
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
}]);
app.controller('inProgressCtrl',['$scope','$http',function($scope, $http){
$scope.names=[];
$scope.inProgressOnLoad = function(){
$http({
url: 'inProgress',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.names=data;
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
}]);
app.controller('completedCtrl',['$scope','$http',function($scope, $http){
$scope.names=[];
$scope.completedOnLoad = function(){
$http({
url: 'completed',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.names=data;
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
}]);
app.controller('TableData', function($scope, $http) {
$http.get("table_data.json")
.success(function (response) {
$scope.names = response.records;
for (var i=0; i<$scope.names.length; i++){
$scope.names[i].ReqDateParsed = new Date($scope.names[i].ReqDate);
$scope.names[i].InitDateParsed = new Date($scope.names[i].InitDate);
$scope.names[i].CompDateParsed = new Date($scope.names[i].CompDate);
$scope.names[i].DbDateParsed = new Date($scope.names[i].DbDate);
}
$scope.sortType = 'EmpName';
$scope.sortReverse = false;
});
});
app.controller('TabController', function(){
this.tab = 1;
this.setTab = function(newValue){
this.tab = newValue;
};
this.isSet = function(tabName){
return this.tab === tabName;
};
this.content = details;
});
app.directive('toBeInitiated', function(){
return{
restrict: 'E',
templateUrl: 'toBe-Initiated.html'
};
});
var details = [
{
description: "Description1",
accessCount: 2,
greenCount: 3,
orangeCount: 2
}
];
app.factory('Excel',function($window){
var uri='data:application/vnd.ms-excel;base64,',
template='<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
base64=function(s){return $window.btoa(unescape(encodeURIComponent(s)));},
format=function(s,c){return s.replace(/{(\w+)}/g,function(m,p){return c[p];})};
return {
tableToExcel:function(tableId,worksheetName){
var table=$(tableId),
ctx={worksheet:worksheetName,table:table.html()},
href=uri+base64(format(template,ctx));
return href;
}
};
})
.controller('MyCtrl',function(Excel,$timeout){
$scope.exportToExcel=function(tableId){ // ex: '#my-table'
$scope.exportHref=Excel.tableToExcel(tableId,'sheet name');
$timeout(function(){location.href=exportHref;},100); // trigger download
}
});
})();
toBeInitiated.jsp
<!-- <div img src="resources/images/spinner.jpg" ng-show='loading'> -->
<div class="col-md-1" > </div>
<div class="col-md-10">
<!-- <input type="button" id="btnExport" value=" Export Table data into Excel " onclick="exportToExcel()" /> -->
<!-- <button type="submit" class="btn btn-primary" id="btnExport" onclick="exportToExcel()">Export to Excel</button> -->
<!-- <button class="btn btn-link" id="btnExport" > --> <!-- ng-click="exportToExcel('#toBeInitiatedData')"> -->
</span> Export to Excel
<!-- </button> -->
<div class="data" id="toBeInitiatedData" data-ng-controller="tobeinitiatedCtrl" data-ng-init="toBeInitiatedOnLoad()">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
test
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<table class="table table-hover table-condensed">
<thead>
<tr>
<!-- <th>S.No.</th> -->
<!-- <th>Employee ID</th> -->
<th>
<a href="#" ng-click="sortType = 'EmpId'; sortReverse = !sortReverse" ng-model="initiatedFor">
Employee ID
<span ng-show="sortType == 'EmpId' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'EmpId' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<!-- <th>Employee Name</th> -->
<th>
<a href="#" ng-click="sortType = 'EmpName'; sortReverse = !sortReverse" ng-model="empName">
Employee Name
<span ng-show="sortType == 'EmpName' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'EmpName' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<!-- <th>Requested By</th> -->
<th>
<a href="#" ng-click="sortType = 'ReqBy'; sortReverse = !sortReverse" ng-model="initiatedBy">
Requested By
<span ng-show="sortType == 'ReqBy' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'ReqBy' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'ReqDateParsed'; sortReverse = !sortReverse" ng-model="requestedDate">
Requested Date
<span ng-show="sortType == 'ReqDateParsed' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'ReqDateParsed' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>Review Data</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="x in names | orderBy:sortType:sortReverse | filter:query | itemsPerPage:10">
<!-- <td>{{x.SNo}}</td> -->
<td>{{x.initiatedFor}}</td>
<td>{{x.empName}}</td>
<td>{{x.initiatedBy}}</td>
<td>{{x.requestedDate | date: 'dd-MMM-yyyy'}}</td>
<td><button type="button" class="btn btn-link" ng-click="open()">View {{x.initiatedFor}}</button></td>
<td>
<select name="action" class="selectContainer actionSelect form-control" ng-model= "action"title="Select 1 action" width="50px">
<option value="resend">Resend</option>
<option value="initiate">Initiate</option>
</select>
</td>
<td><input type="checkbox" ng-model="confirmed" ng-click="toggleSelection(x,confirmed,initiate,initiatedFor)" value="{{x}}" /></td>
</tr>
</tbody>
</table>
<dir-pagination-controls max-size="10" direction-links="true" boundary-links="true"></dir-pagination-controls>
<button class="btn btn-primary pull-right" ng-click="resendIntitate()">Resend/Initiate</button>
</div>
<div>
<!-- <button class="btn btn-primary pull-right" ng-click="resendIntitate()">Resend/Initiate</button> -->
</div>
</div>
<div class="col-md-1"> </div>
<!-- </div> --
home.jsp
<%# taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html>
<html>
<head>
<title>Background Check App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/css/style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<body ng-app="app" ng-controller="TabController as tab">
<div class="container-fluid" ng-controller="TableData">
<div class="row jumbotron" ng-controller="AppController" ng-include="'resources/templates/header.jsp'"></div>
<!-- <div class="row" ng-include="'templates/navigation.html'"></div> -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-7 tab" ng-include="'resources/templates/navigation.jsp'"></div>
<div class="col-md-1"></div>
<div class="col-md-3">
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q" ng-model="query">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<!-- <button class="close">×</button> -->
</form>
</div>
</div>
<hr>
<div class="row" id="home" ng-show="tab.isSet(1)" ng-include="'resources/templates/homeData.jsp'"></div>
<!-- <toBe-Initiated ng-show="tab.isSet(2)"></toBe-Initiated> -->
<!-- <div class="row" ng-show="tab.isSet(2)" id="toBeInitiated" ng-include="'resources/templates/toBeInitiated.jsp'"></div> -->
<!-- <div class="row" ng-show="tab.isSet(3)" id="initiated" ng-include="'resources/templates/initiated.jsp'"></div>
<div class="row" ng-show="tab.isSet(4)" id="pending" ng-include="'resources/templates/pendingWithFadv.jsp'"></div>
<div class="row" ng-show="tab.isSet(5)" id="inProgress" ng-include="'resources/templates/inProgress.jsp'"></div>
<div class="row" ng-show="tab.isSet(6)" id="completed" ng-include="'resources/templates/completed.jsp'"></div>
<div class="row" ng-show="tab.isSet(7)" id="accessList" ng-include="'resources/templates/accessList.jsp'"></div>
<div class="row upload" ng-show="tab.isSet(8)" id="dataUpload" ng-include="'resources/templates/dataUpload.jsp'"></div>
<div class="row" ng-show="tab.isSet(9)" id="newMember" ng-include="'resources/templates/onBoard.jsp'"></div> -->
<div class="footer"></div>
</div>
<div ng-view></div>
<!--scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="resources/angular/angular.js"></script>
<!-- <script src="resources/angular/ui-bootstrap-tpls.js"></script> -->
<!-- <script src="resources/angular/ui-bootstrap.js"</script> -->
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.0.js"</script>
<script src="http://urigo.github.io/angular-spinkit/javascripts/angular-spinkit.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="resources/angular/bootstrap-table-angular.js"></script>
<script src="resources/angular/bootstrap-table-all.js"></script>
<script src="resources/scripts/app.js"></script>
<script src="resources/scripts/loginValidate.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="resources/angular/angular-bootstrap-file-field.js"></script>
<!-- <script src="js/app.js"></script> -->
<!-- <script src="silviomoreto-bootstrap-select-a8ed49e/dist/js/bootstrap-select.js"></script> -->
<!-- <script src="https://code.jquery.com/jquery.js"></script> -->
<script src="https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="resources/angular/ng-file-upload/ng-file-upload-shim.js"></script> <!-- for no html5 browsers support -->
<script src="resources/angular/ng-file-upload/ng-file-upload.js"></script>
<script src='resources/angular/angular-upload.min.js'></script>
<script src="resources/angular/dirPagination.js"></script>
<script src="resources/angular/angular-route.js"></script>
<!--scripts -->
</body>
</html>

app.controller('tobeinitiatedCtrl',['$scope','$http',function($scope, $http,$modal){
you do not inject $modal hence $modal will be undefined.
try this instead:
app.controller('tobeinitiatedCtrl',['$scope','$http','$modal',function($scope, $http,$modal){

Angular nested state has to use $scope.parent from same controller, why?

I have a table, which loops over a scope called $scope.sites.
I'm submitting a form which saves a new site to a DB, and then adds to the site scope.
However, when I update $scope.sites, it doesn't update the table. The table is under the same SiteCtrl controller.
The scope is definitely being appended to, as if I output {{ sites.length }} after the form has posted, its value increases (and the data appears in the DB).
If I add {{ sites.length }} to the same part that the form is included (in the ui-view) it updates, outside of that and it doesn't.
Here's some of the code:
The Javascript
Note, I'm using ui-router for nested states.
myApp.config(function($stateProvider, $urlRouterProvider){
// The default route
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'app/partials/welcome.html',
controller: 'WelcomeCtrl'
})
.state('entity', {
url: '/entity/:id',
params: { id: "" },
templateUrl: 'app/partials/entity/index.html',
controller: 'EntityCtrl'
})
.state('entity.site', {
url: '/site',
templateUrl: 'app/partials/site/index.html',
controller: 'SiteCtrl'
})
.state('entity.site.create', {
url: '/create',
templateUrl: 'app/partials/site/create.html',
controller: 'SiteCtrl'
})
....
myApp.controller('SiteCtrl', ['$scope', '$http', '$stateParams', function($scope, $http, $stateParams) {
$scope.entity_id = $stateParams.id;
$scope.site_uuid = $stateParams.siteuuid;
$scope.sites = {};
$scope.site = {};
$scope.errors = {};
$scope.result = {};
$scope.formData = {};
$http({ method: 'GET', url: 'siteurl' }).
success(function (data, status, headers, config) {
$scope.sites= data.data;
}).
error(function (data, status, headers, config) {
console.log(data.result);
console.log(data.code);
});
$scope.submitForm = function() {
$http.post('submiturl', $scope.formData).success(function(data) {
//Clear the form
$scope.formData = {};
$scope.site = data.data;
$scope.sites.push($scope.site);
}).error(function(data){
$scope.errors = data;
});
}
}]);
The HTML
<div ng-controller="SiteCtrl">
<h1>Sites <a ui-sref="entity.site.create" class="btn"><i class="fa fa-plus"></i> Add New Site</a></h1>
<ui-view></ui-view> <!---- The form is included here by a ui-router state --->
<pre>{{ sites.length }}</pre> <!-- this doesnt update, nor does the table --->
<div class="form-group">
<label for="filter">Filter</label>
<input ng-model="filter" class="form-control">
</div>
<table class="striped">
<thead>
<tr>
<td>Name</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="site in sites | filter:filter">
<td><a ui-sref="entity.site.show({siteuuid:site.uuid})" ui-sref-active="child-active">{{ site.name }}</a></td>
</tr>
</tbody>
</table>
The Form
<h1>Create a New Site at {{ entity.name }} <a ui-sref="entity.site" class="btn">Close</a></h1></h1>
<pre>{{ result }}</pre>
<pre>{{ errors }}</pre>
<pre>{{ site }}</pre>
<pre>{{ sites.length }}</pre> <!---- This updates --->
<form name="createNewSiteForm" method="post" ng-submit="submitForm()">
<div class="form-group">
<label for="name">Site Name</label>
<input type="text" name="name" class="form-control" ng-model="formData.name" autocomplete="off" required />
{{ errors.name }}
</div>
<div class="form-group">
<input type="submit" name="create" value="Save {{ formData.name }}" />
</div>
</form>
The form is included as a nested view in the
If there's anything else you'd like to see let me know and I can post it up.
Update
So the solution was to use:
$scope.parent.sites.push($scope.site);
My question is, do I have to use the parent, when the scope should be inherited due to being in the same Controller?
I'm new to Angular shedding some light on this would be very useful for my learning.

AngularJS form post using controllers and services

jc.controller.js
angular.module('sd').controller('CJController', [
'$scope', 'jcreate', function($scope, $http, jcreate) {
return jcreate.sendJob(jobItems)(function() {
return {
create: jobItems
};
});
}
]);
jc.services.js
angular.module('sd').service('jcreate', [
"$scope", "$http", function($scope, $http) {
_cjObj = [];
_cjObj = $.param({
json: JSON.stringify(
description = $scope.name,
)
});
_create = function() {
return $http.post('URLtoBeAdded', _cjObj).success(function(response, status, headers, config) {
return alert(1);
}).error(function(response, status, headers, config) {
return alert(2);
});
};
return {
create: function(jobItems) {
return _create();
}
};
}
]);
HTML
<form class="form-horizontal" role="form" ng-submit="sendJob(jobItems)" ng-controller="CJController">
<div id="jobConnectionTab">
<div class="field-canvas">
<p class="group-lable">Connection</p>
<div class="form-group">
<label class="control-label col-sm-2" for="description">Name:</label>
<div class="col-sm-5">
<input type="name" class="form-control" id="description" placeholder="Enter description" ng-model="jobItems.name">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="reset" class="btn btn-warning" value="Clean"></button>
<button type="submit" class="btn btn-success" value="Submit"></button>
</div>
</div>
</form>
I have small application using Angular JS and I have splited to three pages as follows
Form page - HTML
controller - JS
services - JS
On page loading following error is given.
Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- jcreate
After update the problem according to given instruction, following error pop:
Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- jcreate

You are missing $http in array:-
It should be like:
angular.module('sd').controller('CJController', [
'$scope','$http', 'jcreate', function($scope, $http, jcreate) {
..
}
Second you cannot use $scope inside the service of angular js. Just remove it and use alternative.

Categories