Question

In this 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();
          }
      });

}

Answer 1

您可以提供ignore选项：

<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>

（demo）

Angular中的KendoSortable不会启用输入字段

1 个答案: