I can't use $scope in ionic, it seems that's $scope is not working.
Let's see very simple example :
App.js :
angular.module('TestApp', ['ionic','TestCtrl'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: "/login",
templateUrl: "views/login.html",
controller : "login"
});
$urlRouterProvider.otherwise('/login');
});
Login.js :
angular.module('TestCtrl',[])
.controller('login', function($scope,$rootScope) {
$scope.giveClass = function() {
console.log($scope.email.length);
}
});
Index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="controllers/login.js"></script>
</head>
<body ng-app="TestApp">
<ion-nav-view></ion-nav-view>
</body>
</html>
Login.html :
<ion-view>
<ion-header-bar class="bar-calm">
<h1 class="title" ng-model="test">Login</h1>
</ion-header-bar>
<ion-content>
<form ng-submit="postLogin()" name="loginForm">
<div class="list list-inset">
<label class="item item-input" ng-class="giveClass()">
<i class="icon icon-fixed-width ion-at placeholder-icon"></i>
<input type="email" name="email" ng-model="email" placeholder="Veuillez entrer votre adresse email" required/>
</label>
<label class="item item-input">
<i class="icon ion-key icon-fixed-width placeholder-icon"></i>
<input type="password" name="password" ng-model="password" placeholder="Veuillez entrer votre mot de passe" required/>
</label>
<div class="list">
<label class="item">
<button class="button button-block button-positive" type="submit">Se connecter</button>
</label>
<label class="item">
<button class="button button-block button-royal" type="submit">S'enregistrer</button>
</label>
</div>
</div>
</form>
</ion-content>
</ion-view>
When I execute this application console (console.log(...) in login.js) return
"Cannot read property 'length' of undefined"
It is not sure, where you plan to set your model property email. I mean, the 'email', which you pass to the ng-model in the Login.html:
<ion-view>
...
// here is expected model 'email'
<input type="email" name="email" ng-model="email"
placeholder="Veuillez entrer votre adresse email" required/>
...
In case, that angular won't find it - it will create that, but on the $scope. And the scope will be the first param not the second here Login.js:
.controller('login', function($scope,$rootScope) {
$scope.giveClass = function() {
// here we can expect 'email' to be created for us
// but not on $rootScope
// it will be available on $scope
console.log($rootScope.email.length);
So, that all means:
there is no explict set of the $rootScope.email
nor of the $scope.email
because we used ng-model="email" we can expect, that angular will create such property for us, but on $scope, not on $rootScope
And that all together will end up with
Cannot read property 'length' of undefined
if we use $rootScope.email.length, or even $scope.email.length. Both of these should be init first or checked if they exist:
Solution: the way to go would be to initiate such property test (it is not needed, but we know what is happening). And even better, to use some Model (and have a dot - check more here: Model in a modal window in angularjs is empty)
.controller('login', function($scope,$rootScope) {
$scope.Model = {};
// if possible - init it,
// $scope.Model.email= "init value";
$scope.giveClass = function() {
// if we need user to init that,
// we have to check if that value was set
if($scope.Model.email){
console.log($scope.email.length);
}
}
and the view
ng-model="Model.email"
Thanks to Radim, I need to use a dot in ng-model, as an object ,and input-type="mail" will bound only if email match to regexp
So working example is :
Apps.js:
angular.module('TestApp', ['ionic','TestCtrl'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: "/login",
templateUrl: "views/login.html",
controller : "login"
});
$urlRouterProvider.otherwise('/login');
});
Login.js:
angular.module('TestCtrl',[])
.controller('login', function($scope,$rootScope) {
$scope.Model = {};
$scope.giveClass = function() {
if($scope.Model.email){
console.log($scope.email.length);
}
});
Index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="controllers/login.js"></script>
</head>
<body ng-app="TestApp">
<ion-nav-view></ion-nav-view>
</body>
</html>
Login.html:
<ion-view>
<ion-header-bar class="bar-calm">
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content>
<form ng-submit="postLogin()" name="loginForm">
<div class="list list-inset">
<label class="item item-input" ng-class="giveClass()">
<i class="icon icon-fixed-width ion-at placeholder-icon"></i>
<input type="text" name="email" ng-model="Model.email" placeholder="Veuillez entrer votre adresse email" required/>
</label>
<label class="item item-input">
<i class="icon ion-key icon-fixed-width placeholder-icon"></i>
<input type="password" name="password" ng-model="password" placeholder="Veuillez entrer votre mot de passe" required/>
</label>
<div class="list">
<label class="item">
<button class="button button-block button-positive" type="submit">Se connecter</button>
</label>
<label class="item">
<button class="button button-block button-royal" type="submit">S'enregistrer</button>
</label>
</div>
</div>
</form>
</ion-content>
</ion-view>
Related
Here Is My Angular controller where I am getting the list of value
$scope.Trucks=result.data.Trucks;
Below is the html
<div class="form-group col-md-5">
<label for="name" class="col-sm-5">Truck Number </label>
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user fa-fw"></i></div>
<input style="max-width: 600px !important;" class="form-control required" ng-model="Trucknumber" type="text" placeholder="Truck Number" id="trucknumber"/>
</div>
</div>
Do google with keyword: "angucomplete"
And create an element like this:
<angucomplete id="ex1"
placeholder="Search trucks"
pause="100"
selectedobject="Trucknumber"
localdata="Trucks"
searchfields="yourfieldname"
titlefield="yourfieldname"
minlength="2"
inputclass="form-control form-control-small"/>
Here,I made working demo for autocomplete search as you want please check below link:
codepen.io
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Truck Number</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css" rel="stylesheet" />
</head>
<body>
<div class="form-group col-md-5" ng-app="autoSearch"
ng-controller="autoSearch">
<label for="name" class="col-sm-5">Truck Number </label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-user fa-fw"></i>
</div>
<input style="max-width: 600px !important;"
class="form-control required" type="text" placeholder="Truck Number"
id="searchLocation" auto-complete ui-items="number"
ng-model="selected" />
</div>
</div>
</body>
</html>
Angular JS:
var app = angular.module('autoSearch', []);
app.controller('autoSearch', function($scope) {
$scope.number = ['2122','2322','4343','32323','43434'];
}).directive('autoComplete', function($timeout) {
return function(scope, iElement, iAttrs) {
iElement.autocomplete({
source: scope[iAttrs.uiItems],
minLength:2,
select: function(e, ui) {
$timeout(function() {
scope.selected = ui.item.value;
}, 100);
}
});
};
});
Please check that code and let me know if you have any query in that.
I hope that will work for you
Thanks.
TOOLS I USE : I am working ionic and I use chrome and ubutu os.
I am trying to do a demo project for data binding please check my plunknr https://plnkr.co/edit/CFSgfWDH5UY0XaDjRoBK?p=preview
Here i am trying to bind the user entered data into the formPost object but in console.log i am getting undefined like({Username: undefined, Name: undefined, EmailID: undefined, Password: undefined}) if some one find any error please let me know
Here is the HTMl
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="app.js"></script>
</head>
<body ng-app="starter">
<ion-pane ng-controller="formValidation">
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">User Name</span>
<input type="text" placeholder="John" ng-model="username">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Name</span>
<input type="text" placeholder="Suhr" ng-model="name">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<input type="text" placeholder="john#suhr.com" ng-model="emailid">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Password</span>
<input type="text" placeholder="john#suhr.com" ng-model="password">
</label>
</div>
<button class="button button-block button-positive" ng-click="submit(username,name,emailid,password)">
sign up
</button>
</ion-content>
</ion-pane>
</body>
</html>
JS
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller('formValidation',function($scope,$http){
$scope.submit=function(username,name,emilid,password){
var formPost = {
"Username":username,
"Name":name,
"EmailID":emilid,
"Password":password
};
console.log(formPost);
$http.post("http://aflaree.com/qrcodeservice/Service1.svc/Signupsupervisor",formPost)
.success(function(response){
console.log(response);
})
.error(function(response){
console.log(response);
});
};
});
Working Pluknr
EDIT
In pure Angular ,
the way you showed in Question will be worked you can see this JsFiddle for reference .
But while coming to ionic this may not be working as Expected because
The problem is specific with ion-content because of the way this directive is defined in the Ionic source code. It specifically creates it's own child scope.
.directive('ionContent', [
'$parse',
'$timeout',
'$ionicScrollDelegate',
'$controller',
'$ionicBind',
function($parse, $timeout, $ionicScrollDelegate, $controller, $ionicBind) {
return {
restrict: 'E',
replace: true,
transclude: true,
require: '^?ionNavView',
scope: true,
template:
'<div class="scroll-content">' +
'<div class="scroll"></div>' +
'</div>',
Because of this and the way inheritance works in JavaScript, you cannot use 2 way binding. Basically your $scope.submit is defined in you controller and is just created as a new primitive to the scope of ion-content. It is not copied by reference like an object would be.
Read this article . It's critical in understanding how this all works and overcoming these issues.
First of all you have a typo in your "EmailID":$scope.emilid, it should be $scope.emailid
The issue was with the ng-controller, it should be defined as a child for <ion-content> you can check the code below:
HTML:
<body ng-app="starter">
<ion-pane >
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<div ng-controller="formValidation">
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">User Name</span>
<input type="text" placeholder="John" ng-model="username">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Name</span>
<input type="text" placeholder="Suhr" ng-model="name">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<input type="text" placeholder="john#suhr.com" ng-model="emailid">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Password</span>
<input type="text" placeholder="john#suhr.com" ng-model="password">
</label>
</div>
<button class="button button-block button-positive" ng-click="submit()">
sign up
</button>
</div>
</ion-content>
</ion-pane>
Angular:
var app = angular.module('starter', []);
app.controller('formValidation', function($scope) {
$scope.submit=function(){
var formPost = {
"Username":$scope.username,
"Name":$scope.name,
"EmailID":$scope.emailid,
"Password":$scope.password
};
console.log(formPost);
}
});
The simplest way to bind your data to the HTML template is below:
Template:
<input [(ngModel)]="name">
.ts code:
name:any= "Tanzeel"
So [()] used for two way binding.
How to navigate from one page to another page. Assume i have a login page, after entering username and password fileds while click on submit button it needs to validate and if both username and password is correct it needs to go home page. Home page content needs to display. Here i am posting code. In Browser url is changing but content is not changing.
index.html
<html ng-app='myApp'>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
</head>
<body >
<div id='content' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" ng-submit="login()">
<h3 class="form-signin-heading">Login Form</h3>
<span><b>Username :</b> <input type="username"
class="form-control" ng-model="user.name" required> </span> </br>
</br> <span><b>Password :</b> <input type="password"
class="form-control" ng-model="user.password" required> </span>
<br><br>
<button class="btn btn-lg btn-primary btn-block" type="submit">
<b>Sign in</b>
</button>
</form>
</div>
<!-- /container -->
</div>
<script src='test.js' type="text/javascript"></script>
</body>
</html>
home.html
Hello I am from Home page
test.js
var applog = angular.module('myApp',['ngRoute']);
applog.config([ '$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.when('/home', {
templateUrl : 'home.html',
controller : 'HomeController'
}).otherwise({
redirectTo : 'index.html'
});
//$locationProvider.html5Mode(true); //Remove the '#' from URL.
}
]);
applog.controller("LoginController", function($scope, $location) {
$scope.login = function() {
var username = $scope.user.name;
var password = $scope.user.password;
if (username == "admin" && password == "admin") {
$location.path("/home" );
} else {
alert('invalid username and password');
}
};
});
applog.controller("HomeController", function($scope, $location) {
});
As #dfsq said you need an ng-view for placing there your new view. Of course if you add your ng-view in the index you will see the content of the index and of home. The solution here is creating two partial views, one for the log in authentication and the other for home. The index file should contain only the ng-view and those elements you want to keep constant in your whole app (menu, footer...)
Here is the code for what I'm saying:
index.html
<html ng-app='myApp'>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src='test.js' type="text/javascript"></script>
</head>
<body >
<div ng-view></div>
<script src='test.js' type="text/javascript"></script>
</body>
</html>
Your new route configuration
applog.config([ '$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.when('/home', {
templateUrl : 'home.html',
controller : 'HomeController'
})
$routeProvider.when('/', {
templateUrl : 'auth.html',
controller : 'LoginController'
}).otherwise({
redirectTo : 'index.html'
});
//$locationProvider.html5Mode(true); //Remove the '#' from URL.
}
]);
and put your login code inside the auth.html file
<div id='content' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" ng-submit="login()">
<h3 class="form-signin-heading">Login Form</h3>
<span><b>Username :</b> <input type="username"
class="form-control" ng-model="user.name" required> </span> </br>
</br> <span><b>Password :</b> <input type="password"
class="form-control" ng-model="user.password" required> </span>
<br><br>
<button class="btn btn-lg btn-primary btn-block" type="submit">
<b>Sign in</b>
</button>
</form>
</div>
<!-- /container -->
</div>
Have in mind that if you place the test.js script in index it will be in the whole app.
Hope it helps
Index.html
<html ng-app='myApp'>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
</head>
<body >
<div ng-view></div>
<script src='test.js' type="text/javascript"></script>
</body>
</html>
test.js
var applog = angular.module('myApp',['ngRoute']);
applog.config([ '$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.when('/home', {
templateUrl : 'home.html',
controller : 'HomeController'
})
$routeProvider.when('/', {
templateUrl : 'login.html',
controller : 'LoginController'
}).otherwise({
redirectTo : 'index.html'
});
//$locationProvider.html5Mode(true); //Remove the '#' from URL.
}
]);
applog.controller("LoginController", function($scope, $location) {
$scope.login = function() {
var username = $scope.user.name;
var password = $scope.user.password;
if (username == "admin" && password == "admin") {
$location.path("/home" );
} else {
alert('invalid username and password');
}
};
});
applog.controller("HomeController", function($scope, $location) {
});
login.html
<div id='content' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" ng-submit="login()">
<h3 class="form-signin-heading">Login Form</h3>
<span><b>Username :</b> <input type="username"
class="form-control" ng-model="user.name" required> </span> </br>
</br> <span><b>Password :</b> <input type="password"
class="form-control" ng-model="user.password" required> </span>
<br><br>
<button class="btn btn-lg btn-primary btn-block" type="submit">
<b>Sign in</b>
</button>
</form>
</div>
<!-- /container -->
</div>
I have a signup template/view written using ionic framework but whenever I submit the Signup form the value of ng-model $scope.account remains Undefined. According to me the main reason for this is that I am not able add controller name (SingupController) in signup.html. Whenever I add ng-controller="SingupController" and run the app browser get closed with a message "Unable to attache. Operation is timeout"
I am using Visual Studio 2013, AngularJS, Ionic and Adobe PhoneGap.
Here is a is the code which I am using.
singup.html:
<ion-header-bar>
<button class="button" ng-click="closeSignup()">Cancel</button>
<h1 class="title">Sign up</h1>
</ion-header-bar>
<ion-content ng-controller="SignupController">
<form ng-submit="doSignup()">
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="First Name" ng-model="account.firstName">
</label>
<label class="item item-input">
<input type="text" placeholder="Last Name" ng-model="account.lastName">
</label>
<label class="item item-input">
<input type="email" placeholder="Email" ng-model="account.email">
</label>
<label class="item item-input">
<input type="text" placeholder="School" ng-model="account.school">
</label>
<label class="item item-input">
<input type="text" placeholder="Country" ng-model="account.country">
</label>
</div>
<div class="list list-inset">
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="account.password">
</label>
<label class="item item-input">
<input type="password" placeholder="Confirm Password" ng-model="account.confirmPassword">
</label>
<p>Minimum 8 characters a-Z, 0-9</p>
</div>
<label class="item">
<input type="submit" class="button button-block button-balanced" value="Sign up" />
</label>
</form>
</ion-content>
And my controller code in controller.js is as follows:
angular.module('angularApp.controllers', [])
.controller('SignupController', ['$scope', '$ionicModal', '$timeout', '$http', function ($scope, $ionicModal, $timeout, $http) {
// Form data for the login modal
$scope.account = {};
// Create the signup modal that we will use later
$ionicModal.fromTemplateUrl('templates/signup.html', {
scope: $scope
}).then(function (modal) {
$scope.modal = modal;
});
// Triggered in the signup modal to close it
$scope.closeSignup = function () {
$scope.modal.hide();
};
// Open the signup modal
$scope.signup = function () {
$scope.modal.show();
};
$scope.doSignup = function () {
var config = {
method: "POST",
url: "http://localhost:60923/api/account/",
data: $scope.account
};
$http(config).success(function (data) {
$scope.mydate = data;
});
};
}])
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet" />
<link href="css/app-overrides.css" rel="stylesheet" />
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="scripts/platformOverrides.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="scripts/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
</head>
<body ng-app="angularApp">
<ion-nav-view></ion-nav-view>
</body>
</html>
I am really not sure where the problem is? Please advice me if you see any problem inside my code. Thanks in advance.
In your controller simply add $scope.account = { } to the initialization code. The issue is almost certainly that the account is being dynamically defined on a child scope. I can't prove that because I don't see the resulting HTML in the post, but I've seen this many times before.
What does this:
ng-disabled="login == ''"
not disable the button when the input field login is empty?
<html ng-app="mainApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet" />
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
</head>
<body ng-controller="mainController">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
LOGIN
</div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="login">Login</label>
<input type="text" class="form-control" id="login" ng-model="login">
</div>
<div class="form-group">
<label for="inputPassword">Passowrd</label>
<input type="password" class="form-control" id="password">
</div>
<button type="submit" ng-disabled="login == ''" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>
<script>
var mainApp = angular.module('mainApp', []);
mainApp.controller('mainController', function ($scope) {
});
</script>
</body>
</html>
Create a form object in your controller which would hold each model property/field, and then check if the field (login) equates and empty string.
...
<input type="text" class="form-control" id="login" ng-model="form.login">
...
<button type="submit" ng-disabled="form.login === ''" class="btn btn-primary">Login</button>
....
Controller
mainApp.controller('mainController', function ($scope) {
$scope.form = {
login: ''
}
});
JSFIDDLE