處理角度陣列的警報

Question

好吧，所以我試圖教自己角度，但我堅持我想要完成的事情。基本上，這是一個使用UI Bootstrap構建的簡單表單。我想要一個信息提示框，當用戶將注意力集中到文本框，textarea，單選按鈕組等等時，就會顯示信息提示框。此類提醒框將會提供關於他們正在填寫的特定字段的說明。每當用戶點擊時，警報框應該消失。到目前爲止，我已經使用onFocus和onBlur功能。我的問題是，我無法隔離只爲用戶所在的領域工作的功能。除非在我的應用程序中創建多個控制器，否則我很難相信這是解決方案。

如何在數組中聲明多個警報框並調用它們各自的輸入字段？

這是我app.j代碼

var nameApp = angular.module('nameApp', ['ngAnimate', 'ui.bootstrap', '$strap.directives']); 

nameApp.controller('InstructionsCtrl', function ($scope, $sce, $timeout) { 

    $scope.alerts = []; 

    $scope.addAlert = function() { 
     $scope.alerts.push({ type: 'info', msg: 'Please input your first name' }); 
    }; 

    $scope.closeAlert = function (index) { 
     $scope.alerts.splice($scope.alerts.indexOf(this), 1); 
    }; 

}); 

我包括PLUNKER here

在此先感謝

Answer 1

我會建議簡化它只是模板，因爲根據所描述的要求您不需要顯示與每個輸入有關的多個警報。

在下面的警報有一個ng顯示，每個輸入設置焦點和模糊的值。

<div class="form-with-instructions" ng-controller="InstructionsCtrl" novalidate="novalidate"> 
    <div role="form"> 
     <div class="row"> 
      <div class="col-md-6 col-sm-6 col-xs-12"> 
       <div class="form-group"> 
        <label>First Name </label> 
        <input type="text" value="" class="form-control" ng-focus="fnAlert = true" ng-blur="fnAlert = false"/> 
       </div> 
      </div> 
      <div class="col-md-6 col-sm-6 col-xs-12"> 
       <div class="alert alert-warning alert-dismissible" role="alert" ng-show="fnAlert"> 
       <button type="button" class="close" ng-click="fnAlert = false"><span aria-hidden="true">&times;</span></button> 
       Please input your first name 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-6 col-sm-6 col-xs-12"> 
       <div class="form-group"> 
        <label>Last Name </label> 
        <input type="text" value="" class="form-control" ng-focus="lnAlert = true" ng-blur="lnAlert = false"/> 
       </div> 
      </div> 
      <div class="col-md-6 col-sm-6 col-xs-12"> 
       <div class="alert alert-warning alert-dismissible" role="alert" ng-show="lnAlert"> 
       <button type="button" class="close" ng-click="lnAlert = false"><span aria-hidden="true">&times;</span></button> 
       Please input your first name 
       </div> 
      </div> 
     </div>    
    </div> 
</div> 

如果您確實想要使用alerts數組方法，那麼您需要爲每個輸入定義不同的警報數組。