角度訪問通用ID

我有一些代碼添加新的輸入，我需要一段時間後，例如3秒輸入隱藏。問題在於如何在每次顯示3秒後隱藏每個單獨的輸入。角度訪問通用ID

HTML代碼中，我有：

id="{{ 'inputNum-' + $id }}"

在Javascript中：

$timeout(function() { 
     document.getElementsById('commentNum-' + $id).css('display', 'none'); 
}, 3000);

https://jsfiddle.net

來源

2017-08-31 andrzej

這是老角或新AngularJS？ – Aligned

它是AngularJS。 – raina77ow

如果你真的想操縱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>

來源

2017-08-31 16:11:39

'!! 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中刪除它們。

來源

2017-08-31 16:01:32 raina77ow

我會使用Angular的綁定系統。

添加屬性

vm.showCommentBox = true;
更改設置布爾

$timeout(function() { vm.showCommentBox = false; }, 3000);
添加綁定到你的HTML
<div class="input-box" ng-if="showCommentBox">

來源

2017-08-31 16:04:18 Aligned

與角一般的建議是做事情角路（它是通過配置框架的約定）。

和角的方法是通過NG-如果與NG-顯示和NG隱藏或DOM存在綁定的知名度，然後修改模型中未直接影響DOM。

或者，您可以在具有類的元素之間進行更改，而不是使用ng類。然後在CSS文件中分離樣式。

根據你的需要：（選擇類名自己）

.hidden{ 
visibility: hidden; 
}

或

.not-displayed{ 
display: none; 
}

來源

2017-08-31 16:27:36 DanteTheSmith

角度訪問通用ID

回答

相關問題