javascript - 不确定为什么 ng-click 不起作用

标签 javascript html angularjs

嘿,我是 js Angular 的新手,无法弄清楚我做错了什么,如何在 ng-click 函数中放置一个对象方法:

  <div class="container" ng-repeat="exercise in exercises">  
    <div class="row">
      <div class="exercise-icon col-xs-2"> 
        <img ng-src="{{ exercise.icon }}">
      </div>

      <div class="col-xs-6">
        <p class="exercise-name"> {{ exercise.name }} </p>
      </div>

      <div class="col-xs-4 counters">
        <span class="decrease">-</span><span class="count"> {{ exercise.count }}  </span>
             <span class="increase" ng-click="{{exercise.increase($index)}}">+</span>
          </div>
        </div>

这是 Controller 脚本:

app.controller('MainController', ['$scope', function($scope) {
  $scope.exercises = [
    {
      icon: 'img/pushup.jpg',
      name: 'Pushups',
      count: 20
    },
    {
      icon: 'img/squat.jpg',
      name: 'Squats',
      count: 15
    },
    {
      icon: 'img/pullup.jpg',
      name: 'Pullups',
      count: 10
    },
    {
      icon: 'img/row.jpg',
      name: 'Rows',
      count: 10
    },
    {
      icon: 'img/lunge.jpg',
      name: 'Lunges',
      count: 10
    },
    {
      icon: 'img/stepup.jpg',
      name: 'Step Ups',
      count: 10
    },
    {
      icon: 'img/situp.jpg',
      name: 'Sit Ups',
      count: 15
    }
  ];

  $scope.increase = function($index) {
    $index.count++;
  };

}]);

练习图标、名称和计数均已显示,但由于某种原因,单击功能无法正常工作,将对象方法插入 ng-click 的语法是否正确?我在网上找不到任何适用的答案。 我期望的功能是每次按下 + 时计数都会增加。

最佳答案

这里有两点错误,你错误地调用了你的函数:

{{exercise.increase($index)}}

应该是

increase($index)

并且您将 $index 视为一个对象,它应该像这样:

$scope.increase = function($index) {
    $scope.exercises[$index].count++;
};

关于javascript - 不确定为什么 ng-click 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35743186/

相关文章:

javascript - 悬停时,如何使用 jQuery 动画更改多个属性

javascript - 使用 <Route> 标签时内容消失

php - 表单提交与 Javascript 结合

javascript - 如何实现迭代、数组填充 Angular 2 输入?

javascript - 使用 $sce.trustAsHtml 渲染字符串返回未定义

java - 将来自 mysql 数据库的英文文本转换为印地语

javascript - ThreeJs Object轻松看鼠标

javascript - react : Why won't this React Component render?

javascript - jQuery Mobile - 可折叠标题中的额外图标

html - 用 CSS 填充剩余空间