选中复选框必须保留其内联div的文本值

时间:2016-02-28 08:22:19

标签: angularjs

我是angularjs的初学者。我希望获得专家建议,使我的代码更好。

我有一个要求,其中有复选框的迭代。每个复选框应该包含2个带有一些id的div元素,一个持有描述和另一个持有价格。

如果我正在检查多个复选框,则应生成如下所示的json字符串对象,并勾选watever correcpoding复选框

var jsonString = [ {selectedCheckBoxId:2, description:"Bread", price: "$2"}, {selectedCheckBoxId:4, description:"Burger", price: "$5"} ]

我对前端全新。所以学习做事的例子。如果有可能请告诉我js小提琴。

您的建议值得赞赏。

1 个答案:

答案 0 :(得分:1)

可能会对你有所帮助。

  <div ng-app="app" ng-controller="MyCtrl">

<table>
  <tr ng-repeat="item in Items track by item.selectedCheckBoxId">
   <td><input type="checkbox" ng-model="item.selectedCheckBoxId" ng-     click="update($event,$index)"></td>
  </tr>
  </table>

</div>  

并在您的控制器中:

 app.controller("MyCtrl", function($scope){

 $scope.Items = [ {selectedCheckBoxId:2, description:"Bread", price: "$2"}, 
              {selectedCheckBoxId:4, description:"Burger", price: "$5"},
              {selectedCheckBoxId:5, description:"Bread2", price: "$2"},
              {selectedCheckBoxId:6, description:"Burger6", price: "$5"}
             ];
$scope.data = [];

$scope.update = function($event,id){
 var checkbox = $event.target;
  var action = (checkbox.checked ? 'add' : 'remove');
  updateData(action,id);
};

$scope.updateData = function(action, id){
  if(action == "add")
   var object = {$scope.Items[id]};
    $scope.data.push(object);
  }else{
    // if object find in data remove it
    }

 });