AngularJS: How to access a property with another property of the same object?

Question

I've looked around and found the same question:

Self-references in object literal declarations

I tried the solution and it didn't work.

HTML:

<input type="number" placeholder="Bells" ng-model="ctrl.have">

<input type="number" placeholder="Bells" ng-model="ctrl.need">

<h3>{{ctrl.have}} bells</h3>
<h3>{{ctrl.need}} bells</h3>

<h1>You need:</h1>
<p id="diff">{{ctrl.diff = ctrl.need - ctrl.have}} bells</p>

<div ng-repeat="beetle in ctrl.beetles">
    {{beetle.qty()}}
<img ng-src="{{beetle.image}}" width="100" height="100">
<p>{{beetle.creature}}</p>
<p class="price">{{beetle.price}}</p>

JS:

var ctrl = this;

ctrl.have = 0;
ctrl.need = 0;

ctrl.beetles = [{
    image: 'cyclostag.jpg',
    creature: 'Cyclommatus Stag',
    price: '8000',
    qty: function() {
        this.amount = ctrl.need / this.price;
        return this.amount;
    }
   }.qty(),...

When it's set like this, the information doesn't show at all. I'm trying make the qty property show as (ctrl.need - ctrl.have) / price of the creature. How do I fix this?

score 0 · Answer 1 · answered May 16 '16 at 02:07

You are calling the method qty()

ctrl.beetles = [{
    image: 'cyclostag.jpg',
    creature: 'Cyclommatus Stag',
    price: '8000',
    qty: function() {
        this.amount = ctrl.need / this.price;
        return this.amount;
    }
   }.qty(),...

So your array is filled with many amounts, like this:

ctrl.beetles //['8000']

I guess you will fix by removing calling the method:

ctrl.beetles = [{
    image: 'cyclostag.jpg',
    creature: 'Cyclommatus Stag',
    price: '8000',
    qty: function() {
        this.amount = ctrl.need / this.price;
        return this.amount;
    }
   },{another}...

score 0 · Answer 2 · answered May 16 '16 at 02:12

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

app.controller('MyController', [function() {
  var ctrl =  this;
  
  ctrl.have = 0;
  ctrl.need = 0;
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyController as ctrl">
    <input type="number" placeholder="Bells" ng-model="ctrl.have">
    <input type="number" placeholder="Bells" ng-model="ctrl.need">

    <h3>{{ctrl.have}} bells</h3>
    <h3>{{ctrl.need}} bells</h3>

    <h1>You need:</h1>
    <p id="diff">{{ctrl.diff = ctrl.need - ctrl.have}} bells</p>

  </div>
</div>

Im just try to put all your code into code snippet so make us easy to evaluate. I might could complete this code If you try put the complete value of array ctrl.beetles

score 0 · Answer 3 · answered May 16 '16 at 13:20

The problem you're seeing is that your solution was basically made for a non-Angular scenario. The way binding works in Angular will prevent your code from working as you intend. Instead, you can simplify it like this (commented for clarity):

index.html

<div ng-controller="Controller as vm">
    <div>
        <label for="foo">Foo:</label>
        <input id="foo" type="text" ng-model="vm.foo">
    </div>
    <div ng-repeat="bar in vm.bars">
        <div>
            Price: {{bar.price}}
        </div>
        <div>
            Total: {{bar.total()}}
        </div>
    </div>
</div>

app.js

(function () {
    "use strict";

    var module = angular.module('app', []);
    module.controller('Controller', function () {
        var vm = this;

        // Property on controller.
        vm.foo = 0;

        // Array on controller.
        //  Each item has a price.
        vm.bars = [
            {
                price: 1000
            },
            {
                price: 2000
            }
        ];

        // Create a function at the controller level,
        //  but build it for the purpose of being attached to each
        //  item from the 'bars' array.
        // Note the `this.price` reference. This will work once 
        //  this function has been applied to each item in the array.
        var total = function () {
            return vm.foo / this.price;
        };

        // Loop through each item in the array and create a new
        //  `total` property, which points to the function defined above.
        vm.bars.forEach(function (bar) {
            bar.total = total;
        });
    });
})();

AngularJS: How to access a property with another property of the same object?

3 Answers3