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';
})
}
}]);
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+'"}}',
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){
i am having trouble with populating modal window form. For example, I click on grid row for editing user and I call ajax which returns me specific data of user.
Current code:
<modal title="Uredi uporabnika" visible="showModal">
<form role="form">
<div class="form-group">
<label for="user_name">Ime</label>
<input type="text" class="form-control" id="user_name" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</modal>
Controller:
$scope.openUserEditor = function(selected_user_id){
$http({
method:'POST',
url:ajax,
dataType: 'json',
headers: {
'Content-type': 'application/x-www-form-urlencoded;charset=utf-8'
},
data:{
action:'loadUserData',
id:selected_user_id
}
}).success(function(data,status){
$scope.userInfo = data.user_info;
$scope.showModal = !$scope.showModal;
});
}
Modal window code:
app.directive('modal', function(){
return {
template: '<div class="modal fade">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
'<h4 class="modal-title">{{ title}}</h4>' +
'</div>' +
'<div class="modal-body" ng-transclude></div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'E',
transclude: true,
replace:true,
scope:true,
link: function postLink(scope, element, attrs) {
scope.title = attrs.title;
scope.$watch(attrs.visible, function(value){
if(value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = false;
});
});
}
};
});
I would apreciate any help, even if I am doing in on right way becouse I am new at Angular.
Use the input ID to populate the values:
$("#user_name").val(data.user_info);
Ok I found solution after millions of different trys and I've just put hands over my head.
<input type="text" class="form-control" id="user_name" value="{{userInfo.u_name}}" />
So I had to add userInfo object and call that parameter u_name.
tnx Shivi for help anyway :D
I am pretty new to angular and can't for the life of me figure out what is wrong with this bit of code. I would be happy to supply more code as is needed.
The issue is that none of the angular actions are happening. The table does not get populated and none of the buttons do anything. The http get never makes it to my server. So, I was wondering if anyone wouldn't mind taking a quick look and letting me know if I made a dumb mistake.
here is my angular code:
function locateController($scope, $http) {
$scope.init = function () {
$http.get('#(Url.Action<WorkorderController>(c => c.GetLocateNumbers(Model.Id)))').success(function (data) {
$scope.model = data;
$scope.locateNumber = $scope.locateNumbers();
$("#loading").css('display', 'none');
$("#ctrl").css('visibility', 'visible');
$scope.master = angular.copy($scope.model);
});
};
$scope.init();
$scope.reset = function () {
if (confirm('Are you sure you want to discard all your changes?')) {
$scope.model = angular.copy($scope.master);
$(".selected").removeClass("selected");
$scope.locateNumber = $scope.locateNumbers();
};
};
$scope.removeLocate = function (remove) {
if (confirm('Are you sure you want to remove this location number?')) {
var oldLines = $scope.locateNumber;
$scope.labor = [];
angular.forEach(oldLines, function (line) {
if (line != remove) $scope.locateNumber.push(line);
});
}
};
$scope.locateNumbers = function () {
if (!$scope.model) {
return null;
}
var lines = [];
angular.forEach($scope.model, function (item) {
if (item.IsActive) {
lines.push(item);
}
});
return lines;
};
$scope.addLocateLine = function () {
$scope.locateNumber.push({
locationNum: ''
});
};
$scope.dirty = function () {
if ($scope.model === undefined) {
return false;
}
var isDirty = !angular.equals($scope.locateNumber, $scope.master.locateNumbers);
if (isDirty) {
$scope.notice = null;
}
return isDirty;
};
$scope.save = function () {
$scope.model.Size = $scope.locateNumber.length;
$scope.model.locateNumbers = $scope.locateNumber;
$http({
method: 'post',
url: '#(Url.Action<WorkorderController>(c => c.AssignLocate(Model.Id,null)))',
headers: {
"Content-Type": 'application/json',
Accepts: 'application/json'
},
data: { wo: $scope.model }
}).success(function (data, status, headers, config) {
$scope.init();
}).error(function (data, status, headers, config) {
alert('An error has occurred. Please try again later or contact an administrator');
});
};
};
Here is the HTML:
<div class="modal hide" id="assignLocate" data-ng-controller="locateController">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="addRow">Locate Number <button type="button" class="btn btn-warning btn-mini" data-ng-click="addLocateLine()">Add</button></h3>
</div>
<div>
<div class="span3 offset1">
<table cellpadding="0" cellspacing="25" border="0" class="table" id="locateNumbers">
<thead>
<tr>
<th>Locate Number</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="num in locateNumber">
<td>
<ng-form name="LocateNum">
<input type="text" ng-model="num.LocateNum" class="span2" required name="Input"/>
<span class="alert-error" ng-show="LocatenNum.Input.$error.required"><strong>*Required</strong></span>
</ng-form>
</td>
<td>
<button class="btn btn-mini btn-danger" ng-click="removeLocate(line)">Remove</button>
</td>
</tr>
</tbody>
</table>
<br /><br />
<div>
<div class="span3" style="padding-bottom:25px; margin-left: 0px">
<button type="button" class="btn btn-inverse" ng-click="reset()" ng-disabled="!dirty()">Reset</button>
<button type="button" class="btn btn-primary pull-right" ng-disabled="form.$invalid" ng-click="save()" ng-disabled="!dirty()">Save</button>
</div>
</div>
</div>
</div>
</div>
And here is a js fiddle:
http://jsfiddle.net/exmMY/
Here are issues that I've noticed:
There is no 'ng-app' in HTML.
locateNumbers function sometimes returns null, but other parts of code expect locateNumber to be array.
I didn't excepted further functionality. Changed your sample could be found here: http://plnkr.co/edit/A52VmYLznpNqMLq4XLK0?p=preview