Question

我有一个用于设置和回读的输入字段。我希望有以下行为：

没有重点：使用回读更新字段
焦点：没有更新，如果按下回车键，则使用在字段中写入的值调用发送。

我有一个mwe，这是一个开始，但是专注时会更新。

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script>
    angular.module('App', []).controller('world', function ($scope) {
		$scope.value1 = 0;
		$scope.value2 = 0;
        $scope.send = function(value) {
            alert(value);
        }

        let readback = function() {
			$scope.value1 += 1;
			$scope.value2 += 1;
			$scope.$apply();
			setTimeout(readback, 100);
        };
        setTimeout(readback, 1);
    });
</script>
</head>

<body ng-app="App" ng-controller="world">
<input type="text" ng-model="value1" ng-keyup="$event.keyCode == 13 && send(value1)" />
<input type="text" ng-model="value2" ng-keyup="$event.keyCode == 13 && send(value2)" />
</body>

编辑：对不起，我有点不清楚，并且过多削减了mwe。我大约有十个这样的输入字段。未聚焦的字段仍应更新，而只有选定的字段不会更新。

Answer 1

您可以为每个输入使用单独的控制器实例来检测ng-focus和ng-blur：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js">
    </script>
    <script>
        angular.module('App', []).controller('world', function ($scope) {
            let isFocus = false;
            
            $scope.value = 0;
            $scope.send = () => alert($scope.value);
            $scope.focus = () => isFocus = true;
            $scope.blur = () => isFocus = false;
            
            let readback = function() {
                if (!isFocus) {
                  $scope.value += 1;
                  $scope.$apply();
                }
                setTimeout(readback, 100);
            };
            setTimeout(readback, 1);
        });
    </script>
</head>

<body ng-app="App">
    <input type="text"
           ng-controller="world"
           ng-model="value"
           ng-keyup="$event.keyCode == 13 && send()"
           ng-focus="focus()"
           ng-blur="blur()" />
    <input type="text"
           ng-controller="world"
           ng-model="value"
           ng-keyup="$event.keyCode == 13 && send()"
           ng-focus="focus()"
           ng-blur="blur()" />
</body>

Angular仅在没有焦点时更新输入字段

1 个答案: