Angularjs : Not Getting initialized value

Question

I am getting the value inside {{total}} but when i am initializing this value in ng-init , not getting the value of total in ng-init

For example :

Calling this function when calculating total price:

ng-change HTML part:

   <div class="col-md-2 col-sm-2 col-lg-2  col-lg-offset-1  col-xs-12 ">
                <select class="form-control select-data pull-right mt10" ng-model="book.package[$index]" ng-change="get_total_price(x.price,book.package[$index],x.id)">
                    <option value="">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>
       </div>

ng-change="get_total_price(x.price,book.package[$index],x.id);

From this i am getting the total price

${{total}}

Now i want to initialise this through ng-init like this

<input type="text" class="hidden" placeholder="Enter name" ng-init="book.total_price= total" ng-model="book.total_price">

but when i checked this through json like this

{{total_price | json}}

it's display the total_price 0 instead of which i'm getting in {{total}}

Can anyone help me to get this? Any help will be appreciated.

Thanks in advance.

Edited :

$scope.get_total_price = function ($price,$value,$id) { 
        $scope.total = $scope.total + Number($price)*Number($value);
};

This is the function by which i'm getting price value and returning to this my view and this return price i need to show initialized in ng-init.

it's not really clear what you are trying to calculate here; you have 3 different variables that seem to be related, but it's unclear when and where you are trying to access each from. on top of that, this feels like exactly what the documentation for ng-init warns against; this is adding unnecessary logic. You should always initialize your properties in your controller, not in your HTML. if you really feel like using ng-init is a necessity, you should try to provide a minimal reproducible example demonstrating why. — Claies
– Claies, Commented Sep 20, 2017 at 6:14

NIKHIL RANE · Accepted Answer · 2017-09-20 06:36:29Z

Try This may be this help you

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
    $scope.value = 0;
    $scope.book = {
      total_price : 0,
    }
    $scope.get_total_price = function (price,value,id) { 
         $scope.book.total_price =  $scope.book.total_price + Number(price) * Number(value);
    };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <span>Total:- {{book.total_price}}</span>
  <br>
   <select ng-model="value" ng-change="get_total_price(2,1,1)">
       <option value="">0</option>
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
       <option value="5">5</option>
       <option value="6">6</option>
       <option value="7">7</option>
       <option value="8">8</option>
       <option value="9">9</option>
       <option value="10">10</option>
       <option value="11">11</option>
       <option value="12">12</option>
    </select>
    <br>
 <input type="text" class="hidden" placeholder="Enter name" ng-model="book.total_price">
<div>

Ramesh Rajendran · Accepted Answer · 2017-09-20 05:33:20Z

0

You have initialized book.total_price object not total_price.

Your total_price object is inside of the book object. So you should write the code like {{book.total_price | json}} instead of {{total_price | json}}.

answered Sep 20, 2017 at 5:33

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

7 Comments

user6891871 Over a year ago

Actually here book is array which also contain values other than total_price. But still i wrote this and not getting changed price value,it's still displaying 0 rather than actual price

Ramesh Rajendran Over a year ago

Could you please provide jsfiddle? unless I couldn't find the issue. But let me know if you check with {{yourarray[0].total_price | json}}.

user6891871 Over a year ago

Please check my edited part. i have added the function from where i'm getting the total price.

Ramesh Rajendran Over a year ago

@user6891871 did you initialize ` $scope.total = 0 ` in globally?

Ramesh Rajendran Over a year ago

@user6891871 Can you please change the parameters name $price,$value,$id to price,value,id?

|

Collectives™ on Stack Overflow

Angularjs : Not Getting initialized value

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related