Fatal编程技术网
  • angularjs/
  • Angularjs bootstrap 3.3.7的UI问题

Angularjs bootstrap 3.3.7的UI问题

angularjs twitter-bootstrap-3

Angularjs bootstrap 3.3.7的UI问题,angularjs,twitter-bootstrap-3,Angularjs,Twitter Bootstrap 3,我在项目中遇到了一些UI问题，我不知道这是否是因为我导入了JavaScript文件？我使用的是angularJS1.6.3和Bootstrap3.3.7 以下是我运行的html页面的标题： <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link r

我在项目中遇到了一些UI问题，我不知道这是否是因为我导入了JavaScript文件？我使用的是angular
JS1.6.3
和
Bootstrap3.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>
这是我得到的 这是我放在控制台上的

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

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

您能添加相关代码吗？你刚刚发布了你的
如果它的
UI
有问题，那么你必须发布你的代码。所以我们可以很容易地帮助你！！你能看看开发者工具控制台，看看这个错误的原因是什么吗？@MyungHee，，，你必须检查控制台bcoz它的angularjs问题你不能在这里得到数据！！谢谢您重播，但我尝试了，没有改变：（@MyungHee您能从开发者窗口发布angular controller代码和控制台错误吗？问题不是因为引导，而是angular。@MyungHee我编辑了我的答案。除了cat.js之外，我看不到您的自定义angular脚本依赖项没有添加到您的项目中的任何地方。请确保所有自定义脚本都是正确的在角点之后添加edependency@MyungHee另外，请确保您已在页面上添加了ng应用程序。谢谢，当我在角度依赖项之后添加所有自定义脚本时，它现在可以工作了 
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);
                }); 
            }
        )
};

});