以角度处理一系列警报

Question

好的，所以我正在尝试自学有角度，但我被困在我想要完成的事情上。基本上，它是一个使用 UI Bootstrap 构建的简单表单。当用户将焦点放在文本框、文本区域、单选按钮组等时，我希望显示一个信息警报框。这样的警报框将包含有关他们正在填写的这个特定字段的说明。每当用户单击关闭时，警报框应该消失。到目前为止，我已经将这个功能与 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-show，每个输入设置焦点和模糊的值。

<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>

如果您确实想使用警报数组方法，那么您需要为每个输入定义不同的警报数组。