CODEWITHSUNDEEP
javascriptangularjs
Soumyadeep Datta
Soumyadeep Datta

Reputation: 5

AngularJS controller not returning value

new to AngularJS here, just started a new application, but it seems I'm missing something important in regards to controllers. 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Arsenal Roster</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
    <script src="angular.min.js"></script>
</head>
<body>

<div  ng-app="arsenalApp" ng-controller="ArsenalController">
  <input ng-model="name">
  <span>{{age}}</span>
</div>

<script>

var arsenalApp=angular.module('arsenalApp',[]);

arsenalApp.controller('ArsenalController',function($scope){

if($scope.name=="jon"){
$scope.age=12;
}else{
    $scope.age=1;
}

});

</script>

</body>
</html>

The functionality I want is: if I input 'jon' in the textbox, the output in the browser should change to 12, otherwise, for any other text, it should remain as 1.

As of now it just outputs 1 and doesn't change on entering 'jon'. What am I missing about controllers?

Upvotes: 0

Views: 56

Answers (1)

gauravmuk
gauravmuk

Reputation: 1616

<input ng-model="name" ng-change="onNameChange()">

$scope.onNameChange = function () {
 if ($scope.name=="jon") {
    $scope.age=12;
 } else {
    $scope.age=1;
 }
}

You need to listen to the change event whenever the name is being changed and the change function should handle your conditions.

Upvotes: 3

Related Questions