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

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