Question

我正在创建一个网络应用程序，其中我有从我的表中提取的培训号码

这是我的控制器，带有静态训练编号：

angular.module('myApp', []);

angular.module('myApp').controller('myController', function($scope) {

  $scope.total = 0;

  $scope.train = [{
      name: 'a',
      train: '100'
    }, {
      name: 'b',
      train: '200'
    }, {
      name: 'c',
      train: '300'
    }, {
      name: 'd',
      train: '400'
    }, {
      name: 'e',
      train: '500'
    }, {
      name: 'f',
      train: '600'
    }, {
      name: 'g',
      train: '700'
    }, {
      name: 'h',
      train: '800'
    }, {
      name: 'i',
      train: '900'
    }, {
      name: 'j',
      train: '1000'
    }

  ];

  $scope.calculateTotal = function(a) {
    if (a.checked) {
      $scope.total -= a.train;
    } else {
      $scope.total += a.train;
    }
  }


})

这就是我的控制器的样子

这是我的表

<table>
     <tbody>
       <tr data-ng-repeat="a in train">
         <td>
           <input type="checkbox" ng-model="a.checked" data-ng-click="calculateTotal(a)"/>{{a.train}}
         </td>

       </tr>
     </tbody>
   </table>

   <h4>Total : {{All Trainingno}}</h4>

如果我添加多个训练编号，但是当我删除训练编号

时失败，这是正常的

我希望他们（100,200,300,400）当我检查复选框时问题和问题开始时我检查复选框（100200300400）这是我检查100,200,300和400时发生的事情（{{{ 1}}）这些图我在检查他们之后得到了

我创造了一个小提琴请帮帮我

Click here

Answer 1

此：

$scope.calculateTotal = function(a) {
  if (a.checked) {
    $scope.total -= a.train;
  } else {
    $scope.total += a.train;
  }
}

应改为：

$scope.calculateTotal = function(a) {
  if (a.checked) {
    $scope.total -= Number(a.train); // casting string to number
  } else {
    $scope.total += Number(a.train); // casting string to number
  }
}

当您在$scope.train.train中使用字符串时，或者您可以将它们更改为整数...

$scope.train = [{
  name: 'a',
  train: 100 // no '
}, {
  ...
}]

更新

$scope.calculateTotal = function(a) {
  if (a.checked) {
    var index = $scope.total.indexOf(Number(a.train))
    if (index > -1) {
      $scope.total.splice(index, 1);
    }
  } else {
    $scope.total.push(Number(a.train))
  }
}

http://jsfiddle.net/agm0m62z/

Answer 2

将a.train转换为Number。由于a.train是String，添加2个字符串只是连接值。但在减法的情况下，如果使用String减去Number，它会自动将String转换为Number。

前：

var a = 1;
    var b = "2";
    var c = a+b;  //12
        c= a-b    //-1


This will work for you.

$scope.calculateTotal = function(a) {
    if (a.checked) {
      $scope.total -= Number(a.train);
    } else {
      $scope.total += Number(a.train);
    }
  }

小提琴：http://jsfiddle.net/XNVj3/2235/

编辑：

 $scope.calculateTotal = function(a) {
    if (a.checked) {
       var index = $scope.total.indexOf(a.train)

         $scope.total.splice(index,1)
    } else {
    $scope.total.push(a.train);

    }

  }

Answer 3

这可以按照您的预期方式运作：

＆＃13;

// Code goes here

angular.module('myApp', []);

angular.module('myApp').controller('myController', function($scope) {

  $scope.total = [];

  $scope.train = [{
      name: 'a',
      train: '100'
    }, {
      name: 'b',
      train: '200'
    }, {
      name: 'c',
      train: '300'
    }, {
      name: 'd',
      train: '400'
    }, {
      name: 'e',
      train: '500'
    }, {
      name: 'f',
      train: '600'
    }, {
      name: 'g',
      train: '700'
    }, {
      name: 'h',
      train: '800'
    }, {
      name: 'i',
      train: '900'
    }, {
      name: 'j',
      train: '1000'
    }

  ];

  $scope.calculateTotal = function(a) {
    if (a.checked) {
       $scope.total.push(a.train);
    } else {
      $scope.total.splice($scope.total.indexOf(a));
    
     
    }
  }


})

＆＃13;

<!DOCTYPE html>
<html ng-app="myApp">


  <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>


  <body data-ng-controller="myController">
    <table>
      <tbody>
        <tr data-ng-repeat="a in train">
          <td>
            <input type="checkbox" ng-model="a.checked" data-ng-click="calculateTotal(a)" />{{a.train}}
          </td>

        </tr>
      </tbody>
    </table>

    <h4>Total : {{total}}</h4>


  </body>

</html>

＆＃13;

angularjs $ scope变量从表中获取数据

3 个答案: