我有一些代码添加新的输入,我需要一段时间后,例如3秒输入隐藏。问题在于如何在每次显示3秒后隐藏每个单独的输入。角度访问通用ID
HTML代码中,我有:
id="{{ 'inputNum-' + $id }}"
在Javascript中:
$timeout(function() {
document.getElementsById('commentNum-' + $id).css('display', 'none');
}, 3000);
我有一些代码添加新的输入,我需要一段时间后,例如3秒输入隐藏。问题在于如何在每次显示3秒后隐藏每个单独的输入。角度访问通用ID
HTML代码中,我有:
id="{{ 'inputNum-' + $id }}"
在Javascript中:
$timeout(function() {
document.getElementsById('commentNum-' + $id).css('display', 'none');
}, 3000);
如果你真的想操纵DOM
,则AngularJS-办法做到这一点是写你的custom directive
:
(function(){
'use strict';
angular
.module('inputsApp', [])
.controller('InputsController', InputsController)
.directive('hideMe', ['$timeout', function ($timeout) {
return {
link: function (scope, element, attrs) {
var timeOut = $timeout(function() {
angular.element(element).css('display', 'none');
}, new Number(attrs.hideMe));
scope.$on('$destroy', function(){
if (timeOut) $timeout.cancel(timeOut);
});
}
}
}])
InputsController.$inject = ['$scope', '$timeout'];
function InputsController($scope, $timeout) {
var vm = this;
// Current input.
vm.input = {};
// Array where inputs will be.
vm.inputs = [];
// Run when input is submited.
vm.addInput = function() {
vm.inputs.push(vm.input);
vm.input = {};
// Reset clases of the form after submit.
$scope.form.$setPristine();
}
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="inputs-app" ng-app="inputsApp" ng-controller="InputsController as cmntCtrl">
<div class="inputs">
<!-- Comment -->
<div class="input" hide-me="2000" ng-repeat="input in cmntCtrl.inputs" id="{{ 'inputNum-' + $id }}">
<!-- Comment Box -->
<div class="input-box">
<div class="input-text">{{ input.text }}</div>
</div>
</div>
</div>
<!-- From -->
<div class="input-form">
<form class="form" name="form" ng-submit="form.$valid && cmntCtrl.addInput()" novalidate>
<div class="form-row">
<textarea
class="input"
ng-model="cmntCtrl.input.text"
placeholder="Add input..."
required></textarea>
</div>
<div class="form-row">
<input type="submit" value="Add input">
</div>
</form>
</div>
</div>
'!! hideMeTimeOut? hideMeTimeOut:0' - 哦,我的。 – raina77ow
@ raina77ow同意,没有任何意义 –
!!东西是检查是否有未定义的快捷方式(如果这是错误的,如果它不是这是真的)不太可读,但类型更快 – DanteTheSmith
这里需要思考角度的方式:不是直接修改UI,修改模型相反 - 让框架为你工作。例如:
vm.addInput = function() {
var inputToAdd = vm.input;
vm.inputs.push(inputToAdd);
$timeout(function() {
var indexOfInput = vm.inputs.indexOf(inputToAdd);
vm.inputs.splice(indexOfInput, 1);
}, 3000);
vm.input = {};
// ... the rest of code
}
Demo。如果您实际上没有从列表中删除这些输入,请再次修改它们的属性。
JS:
$timeout(function() {
var indexOfInput = vm.inputs.indexOf(inputToAdd);
vm.inputs[indexOfInput].hidden = true;
}, 3000);
模板:
<div class="input" ng-hide="input.hidden"
ng-repeat="input in cmntCtrl.inputs" id="{{ 'inputNum-' + $id }}">
Demo。通过这种方法,所有的项目仍然在DOM中(所以它和你试图做的完全相同)。你可能更喜欢使用ng-if
而不是ng-hide
,完全从DOM中删除它们。
我会使用Angular的绑定系统。
添加属性
vm.showCommentBox = true;
更改设置布尔
$timeout(function() { vm.showCommentBox = false; }, 3000);
添加绑定到你的HTML
<div class="input-box" ng-if="showCommentBox">
与角一般的建议是做事情角路(它是通过配置框架的约定)。
和角的方法是通过NG-如果与NG-显示和NG隐藏或DOM存在绑定的知名度,然后修改模型中未直接影响DOM。
或者,您可以在具有类的元素之间进行更改,而不是使用ng类。然后在CSS文件中分离样式。
根据你的需要:(选择类名自己)
.hidden{
visibility: hidden;
}
或
.not-displayed{
display: none;
}
这是老角或新AngularJS? – Aligned
它是AngularJS。 – raina77ow