如何为 Kendo Angular 输入 kendo-auto-complete 设置宽度？答案

【问题标题】：How to set width for Kendo Angular input kendo-auto-complete?如何为 Kendo Angular 输入 kendo-auto-complete 设置宽度？
【发布时间】：2015-01-23 05:59:24
【问题描述】：

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

请问我该如何以编程方式进行操作？

感谢您的帮助。

【问题讨论】：

标签： angularjs autocomplete kendo-ui kendo-grid

【解决方案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");

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

  });

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

【讨论】：