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>

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

以角度处理一系列警报

1 个答案: