Question

我需要在Angular Kendo中设置自动完成输入的宽度。

我怎么能以编程方式做到这一点？

感谢您的帮助。

Answer 1

使用初始值设置它，您应该使用style="width: 200px;"。

示例：

<input kendo-auto-complete="my_autocomplete" ng-model="country" k-data-source="countryNames"  style="width: 200px" />

如果您需要修改它，则应通过css元素的wrapper方法更改宽度。

实施例

$scope.my_autocomplete.wrapper.css("width", "300px");

＆＃13;

  angular.module("KendoDemos", [ "kendo.directives" ])
  .controller("MyCtrl", function($scope){
    $scope.countryNames = [
      "Albania",
      "Andorra",
      "Armenia",
      "Austria",
      "Azerbaijan",
      "Belarus",
      "Belgium",
      "Bosnia & Herzegovina",
      "Bulgaria",
      "Croatia",
      "Cyprus",
      "Czech Republic",
      "Denmark",
      "Estonia",
      "Finland",
      "France",
      "Georgia",
      "Germany",
      "Greece",
      "Hungary",
      "Iceland",
      "Ireland",
      "Italy",
      "Kosovo",
      "Latvia",
      "Liechtenstein",
      "Lithuania",
      "Luxembourg",
      "Macedonia",
      "Malta",
      "Moldova",
      "Monaco",
      "Montenegro",
      "Netherlands",
      "Norway",
      "Poland",
      "Portugal",
      "Romania",
      "Russia",
      "San Marino",
      "Serbia",
      "Slovakia",
      "Slovenia",
      "Spain",
      "Sweden",
      "Switzerland",
      "Turkey",
      "Ukraine",
      "United Kingdom",
      "Vatican City"
    ];

    setTimeout(function() {
      alert("Changing width");
      $scope.my_autocomplete.wrapper.css("width", "300px");
    }, 4000);

  });

＆＃13;

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

<div id="example" ng-app="KendoDemos">
  <div class="demo-section k-content" ng-controller="MyCtrl">
    <input kendo-auto-complete="my_autocomplete" ng-model="country" k-data-source="countryNames"  style="width: 200px" />
  </div>
</div>

＆＃13;

如何设置Kendo Angular输入kendo-autocomplete的宽度？

1 个答案: