Question

我试图通过按钮将3个单独的变量添加到一起，但它似乎无法正常工作：

这是JS：

angular.module('basket', ['onsen'])
.controller('basketController', function() {
  this.topsQuantity = 1;
  this.bottomsQuantity = 2;
  this.underwearQuantity = 3;
  this.calculator = 0;

  this.pay = function pay() {
    window.alert("Thanks!");
  };

  this.total = function calculator(topsQuantity, bottomsQuantity, underwearQuantity) {
    return topsQuantity + bottomsQuantity + underwearQuantity;
  };

});

这是HTML：

<label ng-model="basket.total">Total: {{basket.total}}</label>
        <div  style="width: 100% !important; position: fixed; bottom: 10px;">
          <ons-button modifier="cta" onclick="basket.total">
          <!--<ons-button modifier="cta" onclick="myNavigator.pushPage('Laundries.html', { animation : 'slide' } )">-->
            Calculate Total <ons-icon icon="fa-angle-right"></ons-icon>
          </ons-button>
        </div>

非常感谢任何帮助！

Answer 1

您的代码中存在各种错误：

您最好了解AngularJS上下文中此范围和$范围之间的差异。

this。[propertyName]在javascript中是对象内部名为[propertName]的属性的声明。

在AngularJS中 - $ scope是一个成员，你应该声明你在模板中使用的所有变量（你的html）。

如果您声明控制器，则无法在代码中看到期待某个地方：

纳克控制器= 'basketController'
您将模块命名为“购物篮”并在HTML中使用变量“basket”（尽管未在控制器中声明） - 您应该在$ scope上对其进行十分转换。

所以在你的情况下它应该是：

angular.module('basket', ['onsen'])
   .controller('basketController', function() {
       this.topsQuantity = 1;
       this.bottomsQuantity = 2;
       this.underwearQuantity = 3;
       this.calculator = 0;

       this.pay = function pay() {
           window.alert("Thanks!");
       };

       $scope.total = function calculator(topsQuantity, bottomsQuantity, underwearQuantity) {
           return topsQuantity + bottomsQuantity + underwearQuantity;
       };

   });

（介意$ scope.total）

你的HTML应该是这样的：

<label>Total: {{total()}}</label>

在AngularJS中添加变量

1 个答案: