我注意到,当使用 Angular 在实时服务器上测试项目时,用户提交表单和实际发生的任何事情(当涉及后端进程和数据库时)之间存在很小的延迟。所以我想创建视觉反馈,点击的按钮会变成加载 gif 或其他东西。
我不知道如何通过我的 Angular 提交函数访问按钮元素。
假设我有这个 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 或类,因为我想将其应用于所有单击的按钮。
我已经知道如何创建我想要的视觉样式,只是将其应用到相关元素就是一个问题。
最佳答案
只需使用范围变量更改 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.
}
关于javascript - 单击按钮时的 Angular 加载反馈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25792098/