Question

我根据动态返回的数据创建相同的复选框。

这是我的angularjs因素：

angular
  .module('myapp')
  .factory('$myfirstfactory', function($resource, $response, $path) {

    $myfirstfactory.prototype.$check = function(){
      return '<div class="checkbox"><input id="checkbox-'+this.id+'" type="checkbox" value="'+this.id+'"/><label for="checkbox-'+this.id+'"></label></div>';
    };

    return $myfirstfactory;

});

这是我如何使用上述工厂

<div class="panel-body">
                    <table ng-gridview="grid1" data="griddata">
                        <thead>
                            <tr>
                                <th data-name="$check"></th>
                                <th data-name="status">Status</th>                                    
                                <th data-name="account_number">Account</th>   
                            </tr>
                        </thead>
                    </table>
</div>

我的问题是;我在工厂undefined获得this.id如何在运行时动态创建时为每个复选框分配唯一ID？

Answer 1

如果我在运行时需要动态ID，我通常会使用这个函数：

function guid() {
    function _p8(s) {
        var p = (Math.random().toString(16) + "000000000").substr(2, 8);
        return s ? "-" + p.substr(0, 4) + "-" + p.substr(4, 4) : p;
    }
    return _p8() + _p8(true) + _p8(true) + _p8();
}

然后在返回字符串之前，您可以将id设置为guid（）的返回值。

     angular.module('myapp').factory('$myfirstfactory', function($resource, $response, $path) {
        function guid() {
           function _p8(s) {
            var p = (Math.random().toString(16) + "000000000").substr(2, 8);
            return s ? "-" + p.substr(0, 4) + "-" + p.substr(4, 4) : p;
            }
          return _p8() + _p8(true) + _p8(true) + _p8();
        }

    $myfirstfactory.prototype.$check = function(){
      var id = guid();
      return '<div class="checkbox"><input id="checkbox-'+id+'" type="checkbox"    value="'+this.id+'"/><label for="checkbox-'+id+'"></label></div>';
};

return $myfirstfactory;

}）;

Answer 2

也许这应该是指令？

yourApp.directive("mycheckbox",function() {

    return {
        restrict: 'E',
        replace: true,
        template: '<div class="checkbox"><input id="checkbox-{{checkboxId}}"'+
                  'type="checkbox" value="{{checkboxId"/><label'+
                  'for="checkbox-{{checkboxId}}">{{label}}</label></div>'
        scope {
          checkboxId: '@',
          label : '@'
        },
        link: function(scope) {
             // do something useful here 
        }
    };

});

并像这样使用它：

<mycheckbox checkbox-id="someid"></mycheckbox>

在运行时创建动态复选框 - 获取未定义的＆＃39; angularjs中的错误

2 个答案: