<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-number-input-directive-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<style type="text/css">
input[type="button"]{
background-color: green;
}
input[type="button"].checked{
background-color:orange;
}
</style>
</head>
<body ng-app="numberExample">
<script>
angular.module('numberExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.response = {value : true};
$scope.toggleResponseValue = function(response){
if(!response.value){
response.value = false; //Assume it's not clicked if there's no existing value
}
response.value = !response.value;
};
$scope.buttonState = function(response){
if(response){
if(response.value == true){
console.log('returning checked');
return ['checked'];
}
}
};
}]);
</script>
<form name="myForm" ng-controller="ExampleController">
<input type="button"
value="click me to end the world"
ng-click="toggleResponseValue(response)"
ng-class="{'checked':response.value}">
<!-- ng-class="buttonState(response)" -->
<tt>response = {{response}}</tt><br/>
</form>
</body>
</html>
var value = element(by.binding('value'));
var valid = element(by.binding('myForm.input.$valid'));
var input = element(by.model('value'));
it('should initialize to model', function() {
expect(value.getText()).toContain('12');
expect(valid.getText()).toContain('true');
});
it('should be invalid if empty', function() {
input.clear();
input.sendKeys('');
expect(value.getText()).toEqual('value =');
expect(valid.getText()).toContain('false');
});
it('should be invalid if over max', function() {
input.clear();
input.sendKeys('123');
expect(value.getText()).toEqual('value =');
expect(valid.getText()).toContain('false');
});