将表中的唯一值绑定到复选框的ng-model

时间:2016-04-28 12:40:04

标签: angularjs checkbox angular-ngmodel

我有一个表(其中填充了使用ng-repeat从后端接收的数据。)每个行都有一个复选框,如果选中复选框(多个),我想发送一个请求到服务器删除行。为此,我想将我的复选框绑定到我的表中的唯一字段,但无法获得正确的语法。 我尝试了以下在SO中阅读的选项,但似乎没有任何效果。

  <input type="checkbox" ng-model="demo.Custid" >//this replaced the value in the table with true or false.

  <input type="checkbox" ng-model="formData.checkboxes[demo.Custid]" >//this gave me values in the below  format {"12500":true,"125001":false}

我是否可以获得客户ID的值(在这种情况下)直接绑定到ng-model?我想获取这些值并向服务器发送请求以从表中删除数据相应的客户。

 .controller('Controller1',function($scope,$rootScope,$routeParams){
 $scope.name = 'Controller1';
 $scope.params = $routeParams;
 $scope.formData = {
            checkboxes: {}

                   };
 $scope.demos = [
                 { 'Account':'abc.com',
                   'Custid': 125000,
                    },
                   {'Account':'abc.com',
                   'Custid': 125001, },
                     { 'Account':'abc.com',
                   'Custid': 125002,}
                 ]


         })

我是角度js的新手,任何帮助/指针都会非常有用。

1 个答案:

答案 0 :(得分:2)

使用ng-click。

您已经在演示中进行了ng-repeat循环。看到$ scope.demos和demo.Custid,我假设你刚刚做了

ng-repeat =“演示中的演示”。

现在只需将demo.Custid传递给使用的作用域定义的函数     NG-点击= “myfunction的(demo.Custid)”

我稍微修改了你的代码以使自己更容易,但这应该是非常明显的:

编辑:我刚刚意识到我在jsfiddle中使用了一个角度1.01模板来创建这个代码,我会留下它但是这里是fiddle到angularjs 1.5中的一个工作示例。 5

的index.html

<div ng-controller="Controller1">
  <input type="submit" ng-click="sendToBackend()">
  {{name}}
  <table>
    <thead><tr><td>Select</td><td>Customer</td></tr>
    </thead>
    <tbody>
      <tr ng-repeat="demo in demos">
        <td><input type="checkbox" ng-click="addToList(demo.Custid)"></td>
        <td>{{demo.Custid}}</td>
      </tr>
    </tbody> 
  </table>
  <ul>
    <li ng-repeat="check in checkboxes">{{check}}</li>
  </ul>
</div>

myapp.js

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

function Controller1($scope) {
   $scope.name = 'Controller1';
   $scope.checkboxes = [];
   $scope.demos = [{Account: 'abc.com',Custid: 125000,}, 
                   {Account: 'abc.com',Custid: 125001,}, 
                   {Account: 'abc.com',Custid: 125002,}];
   $scope.addToList = function(id) {
      $scope.checkboxes.push(id);
   };
   $scope.sendToBackend = function() {
      alert("sending " + $scope.checkboxes.length + " items to backend");
   };

};

从这里开始,你应该可以随心所欲地做任何事情。如果您有更具体的问题,请拍摄!