Question

我在项目中面临一些用户界面问题而且我不知道是不是因为我导入的JavaScript文件？我使用了角度JS 1.6.3和bootstrap 3.3.7

这是我运行的html页面的负责人：

<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/cat.js"></script>
<script type="text/javascript" src="angular/angular.js"></script>
<script type="text/javascript" src="angular/angular-messages.js"></script>
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="angular/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script type="text/javascript" src="js/dialogs.min.js" type="text/javascript"></script>

</head>
<body data-ng-controller="CategoryController">
<div class="col-md-8 col-sm-8 col-xs-8" style="position: absolute;top:0;bottom: 0;left: 0;right: 0;margin: auto;">
<div class="panel panel-info spacer">
<div class="panel-heading">
  <input type="checkbox" data-ng-model="checked" aria-label="Toggle ngHide" onchange="hideAndShow()"/><b> Category Form</b>
</div>
<div class="panel-body" class="check-element animate-show-hide" data-ng-hide="checked">
  <div class="alert alert-success" role="alert" data-ng-if="successMessage1" id="success-alert1">
    <strong>Success!</strong> {{successMessage1}}
  </div> 
  <div class="alert alert-danger" role="alert" data-ng-if="errorMessage1" id="error-alert1">
    <strong>Error!</strong> {{errorMessage1}}
  </div>
  <form class="form-horizontal" name="catForm1" novalidate>
  <div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-3" for="idCategory">Category ID</label>
    <div class="col-md-5 col-sm-5 col-xs-5">
      <input type="text" class="form-control" placeholder="Category ID" disabled="disabled">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-3" for="nameCategory">Category Name</label>
    <div class="col-md-5 col-sm-5 col-xs-5" data-ng-class="{ 'has-error': catForm1.nameCategory.$touched && catForm1.nameCategory.name.$invalid}">
      <input type="text" class="form-control" data-ng-model="category.nameCategory" name="nameCategory" placeholder="Enter Category Name" 
             data-ng-minlength="6"
             data-ng-maxlength="20"
             required/>
      <div class="help-block" data-ng-messages="catForm1.nameCategory.$error" data-ng-if="catForm1.nameCategory.$touched">
        <div data-ng-messages-include="messages.html"></div>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-3 right">
    <div class="form-actions">
      <button data-ng-click="catForm1.$valid && saveCategory()" class="btn btn-primary btn-sm">Submit</button>
      <button data-ng-click="reset()" class="btn btn-default btn-sm" type="reset">Reset</button>
    </div></div><br><br></form></div></div>
<div class="panel panel-info spacer">
<div class="panel-heading"><b>Category List</b></div>
<div class="panel-body">
<form class="form-horizontal">    
  <div class="col-md-4 col-sm-4 col-xs-4 right">
    <div class="input-group">
      <input type="text" class="form-control" data-ng-model="keyword" placeholder="Search">
      <div class="input-group-btn">
        <button data-ng-click="search()" class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
      </div></div></div></form><br><br>
<div class="alert alert-success" role="alert" data-ng-if="successMessage2" id="success-alert2">
  <strong>Success!</strong> {{successMessage2}}
</div> 
<div class="alert alert-danger" role="alert" data-ng-if="errorMessage2" id="error-alert2">
  <strong>Danger!</strong> {{errorMessage2}}
</div>
<div id="categoryList">
  <div class="row" style="margin-right: 10px;margin-left: 10px;">
    <div class="col-xs-3"><b>CATEGORY ID</b></div>
    <div class="col-xs-6"><b>CATEGORY NAME</b></div>
    <div class="col-xs-1"></div>
    <div class="col-xs-1"></div>
  </div>
  <hr style="border-color: #cccccc;margin-bottom:5px !important; margin-top:5px !important;margin-right: 10px;margin-left: 10px;" />
  <div class="row" data-ng-repeat-start="c in categories.content" data-ng-class-odd="'alt'" style="margin-right: 10px;margin-left: 10px;">
    <div class="col-xs-3">{{c.idCategory}}</div>
    <div class="col-xs-6">{{c.nameCategory}}</div>
    <div class="col-xs-1 text-right"><button type="button" data-ng-mouseover="showEditRow(c)" class="btn btn-primary btn-sm">Edit</button></div>
    <div class="col-xs-1"><button type="button" data-ng-click="removeCategory(c.idCategory)" class="btn btn-danger btn-sm">Remove</button></div>
    </div>
    <div class="row" data-ng-repeat-end="" data-ng-show="active==c" data-ng-class-odd="'alt'" style="margin-right: 10px;margin-left: 10px;">
      <div class="col-xs-3"></div>
      <form name="catForm2" novalidate>
      <div class="col-xs-6" data-ng-class="{ 'has-error': catForm2.nameCategory2.$touched && catForm2.nameCategory2.$invalid}">
        <input class="form-control input-sm" data-ng-model="category.nameCategory2" name="nameCategory2" 
             data-ng-minlength="6"
             data-ng-maxlength="20"
             required/>
        <div class="row" class="help-block" data-ng-messages="catForm2.nameCategory2.$error" data-ng-if="catForm2.nameCategory2.$touched">
          <div data-ng-messages-include="messages.html"></div>
        </div>
      </div>
      <div class="col-xs-1"><button type="button" data-ng-click="updateCategory()" class="btn btn-default btn-sm">Save</button></div>
      <div class="col-xs-1"></div>
      </form>
    </div>
  </div>
  <br>
  <div class="col-md-8 col-sm-8 col-xs-8">
    <ul class="nav nav-pills">
      <li class="clickable" data-ng-repeat="p in pages track by $index" data-ng-class= "{active:$index==currentPage}" >
        <a data-ng-click="goToPage($index)">{{$index}}</a>
      </li>
    </ul>
  </div></div></div></div></body></html>

这里是javascript文件：

var app=angular.module('crm',['ngMessages']);
app.controller('CategoryController', function($scope,$http,$document,$q){

$scope.categories=[];
$scope.keyword=null;
$scope.currentPage=0;
$scope.category={nameCategory:null}; 
$scope.successMessage1 = '';
$scope.errorMessage1 = '';
$scope.done = false;
$scope.successMessage2 = '';
$scope.errorMessage2='';


//show and hide a DIV
$scope.hideAndShow=function(){
    $scope.checkbox = element(by.model('checked'));
    $scope.checkElem = element(by.css('.check-element'));
    expect($scope.checkElem.isDisplayed()).toBe(true);
    $scope.checkbox.click();
    expect($scope.checkElem.isDisplayed()).toBe(false);
};

//find a category by a keyword
$scope.search=function(){
    $http.get("/catByKW?kw="+$scope.keyword+"&page="+$scope.currentPage)
    .then(function(response){
        $scope.categories=response.data;
        $scope.pages=new Array(response.data.totalPages);   
    });
};

//index of category list
$scope.goToPage=function(p){
    $scope.currentPage=p;
    $scope.search();
};

//reset catForm1
$scope.reset1=function(){
    $scope.successMessage1='';
    $scope.errorMessage1='';
    $scope.category={};
    $scope.catForm1.$setPristine(); //reset Form
};

//save a new category
$scope.saveCategory=function(){
    $http({
          method  : 'GET',
          url     : '/saveCat?nameCategory='+$scope.category.nameCategory, 
          headers : {'Content-Type':'application/x-wwww-form-urlencoded'}
    })
    .then(
          function successCallback(response){

              //var x = document.forms['catForm']['nameCategory'].value;
              //x='';
              document.forms['catForm1'].reset1();
              console.log('Category created successfully');
              $scope.successMessage1 = 'Category created successfully';
              $scope.errorMessage1='';
              $scope.done = true;
              setTimeout(function() {
                    $("#success-alert1").fadeIn(2000).fadeOut(4000);
              });
              //$scope.category={};
              //$scope.catForm.$setPristine();

          },
          function errorCallback(errResponse){
              console.error('Error while creating Category : Duplicate entry!');
              $scope.errorMessage1 = 'Error while creating Category: Duplicate entry!  ' + errResponse.data.object;
              $scope.successMessage1='';
              setTimeout(function() {
                $("#error-alert1").fadeIn(2000).fadeOut(4000);
              });
          }
     ); 
};
//show a row for updating a category
$scope.showEditRow=function(r){
  if($scope.active != r){
    $scope.active = r;
  }
  else{
    $scope.active = null;
  }
};

//remove a category
$scope.removeCategory=function(catID) {
    $http.delete('/deleteCat?catId='+catID)
        .then(
            function successCallback(response){
                $scope.search();
                $scope.successMessage2 = 'Category deleted successfully';
                $scope.errorMessage2='';
                setTimeout(function() {
                    $("#success-alert2").fadeIn(2000).fadeOut(4000);
                }); 
            },
            function errorCallback(errResponse) {
                console.error('Error while removing Category with id :'+catID);
                $scope.errorMessage2 = 'Error while deleting Category: ' + errResponse.data;
                $scope.successMessage2='';
                setTimeout(function() {
                    $("#error-alert2").fadeIn(2000).fadeOut(4000);
                }); 
            }
        )
};

});

这是我得到的这是我登上控制台

console

Answer 1

您在页面上添加了两个angular.js依赖项。请使用 angular.js 或 angular.min.js 并尝试

并且 cat.js 包含角度代码，请将该脚本放在angular.js之后希望这有帮助

引导程序3.3.7的UI问题

1 个答案: