CODEWITHSUNDEEP
asp.netangularjs
patel.milanb
patel.milanb

Reputation: 5992

learning AngularJs : ng-model does not binding into View

I am very new to angularJS and you can say that this is my first day using angularJS.

it seems silly BUt i am trying to do some basic stuff which is not working somehow.

I have a text box in which if you enter 1234, Count should be 555 OR if you enter any number it should be 550 and i am putting 1234 on page load so it is showing me 555 BUT when i change value in textbox, Count is not changing.

<div ng-app>
        <div ng-controller="prCtrl">
            Enter Product ID to get the reviews details
            <input type="number" ng-model="productId" required />
            <br />
            Total Review Count = {{ Count }}
        </div>
</div>

function prCtrl($scope,$http) {
    $scope.productId = 1234;
    if ($scope.productId === 1234) {
        $scope.Count = 555;
    } else {
        $scope.Count = 550;
    }
}

how can i change {{ Count }} depending on the value entered in textbox.

thanks

Upvotes: 0

Views: 96

Answers (2)

Vamsi
Vamsi

Reputation: 9780

Alternatively you can use a function, without watching the value using $watch

function prCtrl($scope,$http) {
    $scope.productId = 1234;

    $scope.getCount = function() {
       if ($scope.productId === 1234) {
          return 555;
       } else {
          return 550;
       }
    }               

}

view: 

<div ng-app>
    <div ng-controller="prCtrl">
        Enter Product ID to get the reviews details
        <input type="number" ng-model="productId" required />
        <br />
        Total Review Count = {{ getCount() }} // replaced with function call
    </div>
</div>

This function gets called when ever a model is changed in the scope, so it will always update your value

Upvotes: 1

Lasse Christiansen
Lasse Christiansen

Reputation: 10325

An option would be to subscribe to the model change and carry out your logic there:

Controller:

function prCtrl($scope,$http) {
    $scope.productId = 1234;
    $scope.$watch('productId', function(newValue, oldValue){
    if (newValue === 1234) {
            $scope.Count = 555;
        } else {
            $scope.Count = 550;
        }
    });
}

View:

<div ng-app>
    <div ng-controller="prCtrl">
        Enter Product ID to get the reviews details
        <input type="number" ng-model="productId" required />
        <br />
        Total Review Count = {{ Count }}
    </div>
</div>

I have tested that, and it appears to do what you want.

And a final note - you mention you are new to angular - I would highly recommend egghead.io 's sessions on AngularJS ( https://egghead.io/lessons ). They are good at getting you up to speed with AngularJS :)

Upvotes: 1

Related Questions