ディレクティブを使用して、要素の最後にメッセージを挿入します。 Angular.JS

Question

私はすべてのチェックボックスを持っています。私はこれらのチェックボックスの最後に文字列 "MESSAGE IN THE END"を入れる必要があります。 どうすればいいですか？

 <input type="checkbox" ng-model="my_check" validate /> 
    <br> 
    <input type="checkbox" ng-model="my_check" validate /> 
    <br> 
    <input type="checkbox" ng-model="my_check" validate /> 
    <br> 
    <input type="checkbox" ng-model="my_check" validate /> 

app.directive('validate', function ($timeout,$compile) { 

return { 
    restrict: 'AE', 
    require: 'ngModel', 

    link: function (scope, element, attrs, ngModel) { 
       if (!ngModel){ 
      return;   
     }    
    ngModel.$parsers.push(function(val){ 
     var element_delete= angular.element(document.querySelector('#errormy_check')) 
       element_delete.remove(); 
       var newDirective = angular.element('<div id="errormy_check">MESSAGE IN THE END</div>'); 
       element.after(newDirective); 
       $compile(newDirective)(scope); 
       ngModel.$render(); 
     return false; 
    }) 
    } 

    }; 
}); 

私はこれが必要です！ ユーザーがチェックボックスの値を変更するたびに、すべてのチェックボックスの最後にこのメッセージを挿入します。

http://jsfiddle.net/w7vy9kbt/

Answer 1

あなたは、すべてのメッセージ要素の代わりに、特定の1つを取り外しています。

var element_delete= angular.element(document.querySelector('#errormy_check')); 

それがあるべき

、

var element_delete = element.next('#errormy_check'); 

var app = angular.module('app', []); 
 

 
app.controller('appCtrl', function($scope) {}); 
 

 
app.directive('validate', function($timeout, $compile) { 
 

 
    return { 
 
    restrict: 'AE', 
 
    require: 'ngModel', 
 

 
    link: function(scope, element, attrs, ngModel) { 
 
     if (!ngModel) { 
 
     return; 
 
     } 
 
     ngModel.$parsers.push(function(val) { 
 
     var element_delete = element.next('#errormy_check'); 
 
     element_delete.remove(); 
 
     var newDirective = angular.element('<div id="errormy_check">MESSAGE IN THE END</div>'); 
 
     element.after(newDirective); 
 
     $compile(newDirective)(scope); 
 
     ngModel.$render(); 
 
     return false; 
 
     }) 
 
    } 
 

 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<section ng-app="app"> 
 
    <article ng-controller="appCtrl" class="container"> 
 
    <form class="form-horizontal well" name="form"> 
 
     <input type="checkbox" ng-model="my_check" validate /> 
 
     <br> 
 
     <input type="checkbox" ng-model="my_check" validate /> 
 
     <br> 
 
     <input type="checkbox" ng-model="my_check" validate /> 
 
     <br> 
 
     <input type="checkbox" ng-model="my_check" validate /> 
 
    </form> 
 
    </article> 
 
</section>