如何使用 AngularJS 禁用基于下拉选择值的输入文本框？

Question

对于 AngularJS

，我在 JavaScript 中有以下内容

$("#listOptionFruit").kendoDropDownList({
    autoBind: true,
    filter: 'contains',
    dataSource: $scope.listOptionFruitList,
    select: $scope.listOptionFruitSelect
});

$scope.listOptionFruitSelect = function (e)
{            
   $scope.listOptionFruit = e.dataItem;
   if ($scope.listOptionFruit === 'Strawberry') {
       $scope.enableMe = true;
   } 
   else 
   {
       $scope.enableMe =  false;
   }                               
}

cshtml端如下：

<label for="listOptionFruit">Fruits</label>
<input id="listOptionFruit" name="listOptionFruit"  required />


<label for="myValue">MyValue</label>
<input type="text"  id="myValue" ng-disabled="enableMe"  />

因此 enableMe 的值是正确的，但文本框似乎没有被禁用或操作似乎没有生效。

因此，如果用户从列表中选择 Strawberry，则文本框会被禁用，否则会被启用

Answer 1

由于事件发生在AngularJS框架之外，需要绑定$apply:

$("#listOptionFruit").kendoDropDownList({
    autoBind: true,
    filter: 'contains',
    dataSource: $scope.listOptionFruitList,
    select: function (ev) {
        $scope.$apply(function() {
            $scope.listOptionFruitSelect(ev);
        });
    }
});

AngularJS 通过提供自己的事件处理循环来修改正常的 JavaScript 流程。这将 JavaScript 分为经典和 AngularJS 执行上下文。只有在 AngularJS 执行上下文中应用的操作才能受益于 AngularJS 数据绑定、异常处理、属性监视等

有关详细信息，请参阅

AngularJS Developer Guide - Integration with the browser event loop

如何使用 AngularJS 禁用基于下拉选择值的输入文本框？

How can i disable an input text box based on dropdown selection value using AngularJS?

javascript

kendo-ui

angularjs