AngularJS controller not returning value

Question

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?

gauravmuk · Accepted Answer · 2017-06-18 06:23:32Z

3

<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.

answered Jun 18, 2017 at 6:23

gauravmuk

1,62614 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS controller not returning value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related