AngularJS example 4

by spencerooni

HTML

<body ng-app>
    <div ng-controller="BasicController">
        
        <div ng-show="name && age">
            Ready to rumble!!
        </div>
        
        Name <input type="text" ng-model="name" ng-class="{'green-border': name.length > 0}" />
        Age <input type="text" ng-model="age" ng-class="{'green-border': age.length > 0}" />
        
    </div>
</body>

CSS

.green-border {
    border-width: 5px;
    border-color: green;
}

JavaScript

function BasicController($scope) {

    $scope.name = '';
    $scope.age = '';

}

// alternativley... 
/*
function BasicController($scope) {

    $scope.name = '';
    $scope.age = '';
    
    $scope.isReady = function() {
        return $scope.name && $scope.age;
    };

}
*/

/*
var $name = $("#name");
var $age = $("#age");
var $readyToRumbleDiv = $("#ready-to-rumble");

$name.on("keyup", checkLengths);
$age.on("keyup", checkLengths);

function checkLengths() {
    if($name.val().length() > 0 && $age.val().length() > 0) {
        $readyToRumbleDiv.show();    
    } else {
        $readyToRumbleDiv.hide();
    }
}
*/