如何在没有ng重复的情况下制作模板，并使用角度拖放列表将数据传递给$scope

How to make template without ng-repeat and pass data to $scope with angular-drag-and-drop-lists?

本文关键字：拖放 列表 数据 scope ng 情况下      更新时间：2023-09-26

我想将角度拖放列表与我自己的网格模板一起使用到所见即所得编辑器。如何在没有ng-repeat的情况下构建我自己的 HTML 模板，以便它能够将项目放在任何预定义的列中，并将信息存储在$scope哪个列项目被删除

？

我想将放置的项目存储在数组columns：

.controller('DragDropGrid', ['$scope',
function($scope) {
  $scope.layouts = {
    selected: null,
    templates: [
    {name: "Plugin", type: "item", id: 2},
    ],
    columns: [],
    oldaproachcolumns: [
        "A": [
        ],
        "B": [
        ]
      }
    ]
  };
}
]);

这当前不是工作模板。在删除时，它会抛出错误"undefined 不是对象(评估'targetArray.splice'("：

<div ng-include="'grid.html'"></div>
<script type="text/ng-template" id="grid.html">
  <div class="col-md-12 dropzone box box-yellow">
    <div class="row template-grid" dnd-list="list">
      <div class="col-xs-12 col-md-8" ng-repeat="item in list" dnd-draggable="item" ng-include="item.type + '.html'">Header</div>
      <div class="col-xs-6 col-md-4">News</div>
    </div>
  </div>
</script>
<script type="text/ng-template" id="item.html">
  <div class="item">Plugin {{item.id}}</div>
</script>

这是标准的工作方法：

<div class="row">
  <div ng-repeat="(zone, list) in layouts.oldaproachcolumns" class="col-md-3">
    <div class="dropzone box box-yellow">
      <h3>{{zone}}</h3>
      <div ng-include="'list.html'"></div>
    </div>
  </div>
</div>
<script type="text/ng-template" id="list.html">
<ul dnd-list="list">
<li ng-repeat="item in list" dnd-draggable="item" dnd-effect-allowed="move" dnd-moved="list.splice($index, 1)" dnd-selected="layouts.selected = item" ng-class="{selected: layouts.selected === item}" ng-include="item.type + '.html'">
</li>
</ul>
</script>

基于此示例：演示

如何在没有ng重复的情况下构建我自己的HTML模板

使用 $templateCache 和 for 循环作为替代方法：

var app = angular.module('foo', []);
function bop(model, data)
  {
  return data ? model : 'foo';
  }
function baz()
  {
  return bop;
  }
function foo($templateCache)
  {
  var i = 0, len = 5, bar = "";
  
  for (i; i < len; i++)
  	{
    bar = bar.concat("<li>",i,"<p ng-include='u0022'foo''u0022></p></li>");
    }
  
  $templateCache.put('listContent', bar);
  }
angular.module('foo').filter('baz', baz);
app.run(foo);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="foo">
  <script type="text/ng-template" id="foo">
    <span>hi</span>
  </script>
  <input ng-model="dude">
  <ul ng-include="'listContent' | baz:dude"></ul>
</div>

引用

  • AngularJS： API： $templateCache

  • AngularJS：有没有比指定的方法更好的方法来实现这一点？

相关文章：