1

在这个 plunk中，我有一个用 kendo-sortable 装饰的 UL 列表和另一个没有装饰的列表。在第一种情况下，输入字段被禁用（显然禁用以允许在字段上拖动），而在第二个列表中，输入字段被启用。如何在第一个列表中启用字段？

HTML：

<ul kendo-sortable="list">
      <li style="list-style-type:none" ng-repeat="c in conditions">
            {{$index}}
            <input ng-model="c.fieldA" style="width:60px" class="k-textbox"/> 
            <select kendo-drop-down-list style="width:60px" ng-model="c.oper">
              <option value="0">=</option>
              <option value="1">&gt;</option>
              <option value="2">&lt;</option>
            </select> 
            <input ng-model="c.fieldB" style="width:60px" class="k-textbox" /> 
      </li>
  </ul>

  Same list without sortable (fields enabled):
  <ul>
      <li style="list-style-type:none" ng-repeat="c in conditions">
            {{$index}}
            <input ng-model="c.fieldA" style="width:60px" class="k-textbox" /> 
            <select kendo-drop-down-list style="width:60px" ng-model="c.oper">
              <option value="0">=</option>
              <option value="1">&gt;</option>
              <option value="2">&lt;</option>
            </select> 
            <input ng-model="c.fieldB" style="width:60px" class="k-textbox" /> 
      </li>
  </ul>

Javascript：

var app = angular.module("app", [ "kendo.directives" ]);

function MyCtrl($scope) {

   $scope.conditions = [];

   var load = function() {

          var c = {
                  fieldA: '111',
                  oper: 0,
                  fieldB: '222'
            };

            $scope.conditions.push(c);


            var c1 = {
                  fieldA: '333',
                  oper: 0,
                  fieldB: '444'
            };

            $scope.conditions.push(c1);
   };


    $scope.$on("kendoWidgetCreated", function(event, widget){
          if (widget === $scope.list) {
              load();
          }
      });

}
4

1 回答 1

2

您可以提供一个忽略选项：

<ul kendo-sortable="list" k-ignore="'input'">
  <li style="list-style-type:none" ng-repeat="c in conditions">
        {{$index}}
        <input ng-model="c.fieldA" style="width:60px" class="k-textbox" /> 
        <select kendo-drop-down-list style="width:60px" ng-model="c.oper">
          <option value="0">=</option>
          <option value="1">&gt;</option>
          <option value="2">&lt;</option>
        </select> 
        <input ng-model="c.fieldB" style="width:60px" class="k-textbox" /> 
  </li>
</ul>

（演示）

于 2015-02-16T14:48:47.117 回答