Question

我的情况是：我有一个searchbox来查找大学，结果中提供的选项之一是I can't found my college。此选项允许您在其他input type="text"中手动输入您的大学名称，只有在您单击此选项时才会显示该名称。当您单击选项以手动输入大学时，searchbox将被禁用并使用ng-disable。我需要实现的功能是，当用户再次单击禁用searchbox时，此功能可以再次显示，隐藏其他输入文本以手动插入大学并让他/她能够搜索大学再次。这是情境代码的一种表示形式：

模板：

...    
    <div class="input-wrapper">
      <input class="searchbox" ng-disabled="!searching" type="text" ng-model="collegeSearch" ng-click="searchingAgain()">
    </div>

    <br>

    <ul class="result-wrapper" ng-show="searching && collegeSearch.length > 0">
      <li>Result 1</li>
      <li>Result 2</li>
      <li ng-click="insertManually()">I can't found my college</li>
    </ul>

    <input ng-show="!searching" type="text" placeholder="Enter the college name manually">
...

控制器：

angular.module('tAngularApp')
      .controller('MainCtrl', ["$scope", "$rootScope", function ($scope, $rootScope) {
        this.awesomeThings = [
          'HTML5 Boilerplate',
          'AngularJS',
          'Karma'
        ];

        $scope.searching = true;

        $scope.insertManually = function () {
            $scope.searching = false;
            $scope.collegeSearch = "";
        }

        $scope.searchingAgain = function () {
            console.log('Searching ...');
            $scope.searching = true;
        }

    }]);

问题在于，当禁用搜索框输入时，ng-click永远不会触发，因此我可以再次激活搜索功能。

有人可以帮我找到解决方案吗？感谢。

Answer 1

ng-disabled当true添加属性disabled时。浏览器不会让任何指针事件（生成点击事件）生成。因此，控件不会收到任何点击或更改。

所以你可能需要稍微改变一下：

Working plunkr

请注意我们在包装器div #input-wrapper上添加了ng-click。另外ng-click/ng-change任何一个都可以输入，但是你可能想要使用ng-change来不接受不必要的更改。

<div class="input-wrapper" ng-click="searching = true">
  <input class="searchbox" ng-disabled="!searching" type="text" ng-model="collegeSearch" ng-change="searchingAgain()" ng-model-options="{ debounce: 200 }">
  <div class="searchbox-reset"></div>
</div>

禁用后，在onClick事件上再次重置输入

1 个答案: