Question

我环顾四周，发现了同样的问题：

Self-references in object literal declarations

我尝试了解决方案但没有用。

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(),...

当它设置为这样时，信息根本不显示。我正在尝试将qty属性显示为（ctrl.need - ctrl.have）/该生物的价格。我该如何解决这个问题？

Answer 1

您正在调用方法qty()

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

所以你的数组充满了很多金额，比如：

ctrl.beetles //['8000']

我想你会通过删除调用方法来修复：

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

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

我只是尝试将您的所有代码放入代码段，以便我们轻松评估。我可能可以完成此代码如果您尝试将数组的完整值ctrl.beetles

Answer 3

您遇到的问题是您的解决方案基本上是针对非Angular方案制作的。 Angular中的绑定方式将阻止您的代码按预期工作。相反，您可以像这样简化它（为清晰起见而评论）：

的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：如何使用同一对象的另一个属性访问属性？

3 个答案: