Question

我注意到在使用Angular在实时服务器上测试项目时，提交表单的用户与实际发生的任何事情（当涉及后端进程和数据库时）之间存在小的延迟。因此，我想创建视觉反馈，其中点击的按钮变成加载GIF或其他东西。

我无法通过我的Angular提交函数来了解如何访问button元素。

说我有这个HTML：

<form ng-submit="submit(user)">
  <input type="text" ng-model="user.name" />
  <button type="submit">Submit</button>
</form>

然后在Angular中：

$scope.submit = function(user){
  //http requests and whatever else to process the form.
  //how can I access the button element to alter it's visual state?
});

我只是不知道如何访问点击的按钮。理想情况下，我不想使用特定的id或类，因为我想将其应用于所有点击的按钮。

我已经知道如何创建我想要的视觉样式，它只是将它应用于相关元素，这是一个问题。

Answer 1

只需使用范围变量更改ng-style或ng-class（首选）：

使用ng-style的简单风格：

HTML

<form ng-submit="submit(user)">
  <input type="text" ng-model="user.name" />
  <button type="submit" ng-style="{'opacity': buttonOpacity} ">Submit</button>
</form>

JS：

$scope.buttonOpacity = 0.4;
$scope.submit = function(user){
  //http requests and whatever else to process the form.
  //how can I access the button element to alter it's visual state?
  $scope.buttonOpacity = 0.4;
});

使用ng-class更好的替代方案：

HTML

<form ng-submit="submit(user)">
  <input type="text" ng-model="user.name" />
  <button type="submit" ng-class="{'myAlteredButtonClass': applyNewButtonClass === true} ">Submit</button>
</form>

JS：

$scope.applyNewButtonClass = false;
$scope.submit = function(user){
  //http requests and whatever else to process the form.
  //how can I access the button element to alter it's visual state?
  $scope.applyNewButtonClass = true;
});

CSS：

.myAlteredButtonClass {
    opacity: 1;
    border: 1px solid;
    color: green;
    ... etc.
}

Answer 2

在Angular中有很多方法可以做到这一点。其中包括ng-show和ng-if。使用ng-show，您可以执行以下操作：

<form ng-submit="submit(user)">
  <input type="text" ng-model="user.name" />
  <button ng-show="!submitted" type="submit">Submit</button>
  <div ng-show="submitted" >Loading spinner here</div>
</form>

和

$scope.submit = function(user){
  $scope.submitted = true;
});

Answer 3

如果您为表单命名，您将能够访问其元素：

https://docs.angularjs.org/api/ng/directive/form#submitting-a-form-and-preventing-the-default-action

按钮单击时的角度加载反馈

3 个答案: