个人中心
gpt4 book ai didi

css - 使用 angularjs 的 Bootstrap 模式在 plunker 或 jsfiddle 中工作，但在本地不起作用

转载 作者：行者123 更新时间：2023-11-28 17:26:39 24 4
gpt4 key购买 nike

大家好，我正在研究 angularjs，它预先形成一个带有验证的表单，提交后数据进入表格。我可以选择编辑它。要编辑，我使用 Bootstrap 模式进行编辑。 plunker 一切正常，但问题是，当我尝试在本地浏览器中运行相同的代码时，它无法正常工作。请帮帮我

让我给你看代码:

index.html

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
  <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Example of Bootstrap 3 Tables with Borders</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js'></script>
  <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.1.0.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

  <script src="script.js"></script>
  <script src="controller/listCtrl.js"></script>

  <script src="script.js"></script>

  <link rel="stylesheet" href="style.css">


  <style type="text/css">
    .bs-example {
      margin: 20px;
    }
  </style>




</head>

<body>
  <div ng-app="app" ng-controller="CustomerController">
    <div class="main-content">

      <!-- You only need this form and the form-basic.css -->
      <form name="exampleForm" class="elegant-aero" ng-submit="addNew(personalDetails); form.$setPristine()">
        <label>Name:</label>
        <input type="text" name="userFirstName" ng-model="personalDetails.name" required />
        <div ng-messages="exampleForm.userFirstName.$error">
          <div ng-message="required">This field is required</div>
        </div>
        <label>Email Address:</label>
        <input type="email" name="userEmail" ng-model="personalDetails.email" required />
        <div ng-messages="exampleForm.userEmail.$error">
          <div ng-message="required">This field is required</div>
          <div ng-message="email">Your email address is invalid</div>
        </div>

        <label>Phone Number:</label>
        <input type="text" name="userPhoneNumber" ng-model="personalDetails.phone" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
        <div ng-messages="exampleForm.userPhoneNumber.$error">
          <div ng-message="required">This field is required</div>
          <div ng-message="pattern">Must be a valid 10 digit phone number</div>
        </div>

        <label>User Address:</label>
        <textarea type="text" name="userMessage" class="form-control" rows="4" ng-model="personalDetails.address" ng-minlength="10" ng-maxlength="100" required></textarea>
        <div ng-messages="exampleForm.userMessage.$error">
          <div ng-message="required">This field is required</div>
          <div ng-message="minlength">Message must be over 10 characters</div>
          <div ng-message="maxlength">Message must not exceed 100 characters</div>
        </div>
        <br>
        <div class="form-row">
          <button type="submit" class="btn btn-primary" ng-click="submit()">Submit Form</button>
        </div>
      </form>

    </div>
    <div>
      <div class="row" ng-hide="!personalDetails.length">
        <div class="bs-example">
          <table id="example" class="table table-bordered" cellspacing="0" width="100%">
            <thead>
              <tr>

                <th>Name
                </th>
                <th>Email
                </th>
                <th>Phone Number
                </th>
                <th>Address
                </th>
                <th>Editing
                </th>
                <th>Delete
                </th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="personalDetail in personalDetails">

                <td>{{personalDetail.name}}</td>
                <td>{{personalDetail.email}}</td>
                <td>{{personalDetail.phone}}</td>
                <td>{{personalDetail.address}}</td>
                <td>
                  <button class="btn btn-default" ng-click="open(personalDetail)">Edit {{ personalDetail.name }}</button>
                  <script type="text/ng-template" id="myModalContent.html">
                    <div class="modal-header">
                      <h3>The Customer Name is: {{ personalDetail.name }}</h3>
                    </div>
                    <div class="model-body">
                      This is where the Customer Details Goes
                      <br />
                      <form name="exampleForm" class="elegant-aero" ng-submit="addNew(customer); form.$setPristine()">
                        <label>Name:</label>
                        <input type="text" name="userFirstName" ng-model="customer.name" required />
                        <div ng-messages="exampleForm.userFirstName.$error">
                          <div ng-message="required">This field is required</div>
                        </div>

                        <label>Email Address:</label>
                        <input type="email" name="userEmail" ng-model="customer.email" required />
                        <div ng-messages="exampleForm.userEmail.$error">
                          <div ng-message="required">This field is required</div>
                          <div ng-message="email">Your email address is invalid</div>
                        </div>

                        <label>Phone Number:</label>
                        <input type="text" name="userPhoneNumber" ng-model="customer.phone" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
                        <div ng-messages="exampleForm.userPhoneNumber.$error">
                          <div ng-message="required">This field is required</div>
                          <div ng-message="pattern">Must be a valid 10 digit phone number</div>
                        </div>

                        <label>User Address:</label>
                        <textarea type="text" name="userMessage" class="form-control" rows="4" ng-model="customer.address" ng-minlength="10" ng-maxlength="100" required></textarea>
                        <div ng-messages="exampleForm.userMessage.$error">
                          <div ng-message="required">This field is required</div>
                          <div ng-message="minlength">Message must be over 10 characters</div>
                          <div ng-message="maxlength">Message must not exceed 100 characters</div>
                        </div>
                        <br>
                        <div class="form-row">
                          <button class="btn btn-primary" ng-click="ok(personalDetail)">Update Customer</button>
                        </div>
                      </form>
                    </div>
                  </script>
                </td>
                <td>
                  <input type="button" class="btn btn-danger pull-right" data-ng-click="remove(personalDetail.name)" value="Remove">
                </td>
              </tr>

            </tbody>
          </table>

        </div>
      </div>

    </div>


  </div>

</body>

</html>

script.js

var app = angular.module('app', ['ui.bootstrap', 'ngMessages']);
app.controller('CustomerController', function($scope, $timeout, $modal, $log) {
  var taskData = localStorage['tasksList'];
  if (taskData !== undefined) {
    $scope.personalDetails = JSON.parse(taskData);
  }
  $scope.personalDetails = [{
    'name': 'Muhammed',
    'email': 'shanid@shanid.com',
    'phone': '8095187009',
    'address': 'Bangalore'
  }, {
    'name': 'Muhammed',
    'email': 'shanid@shanid.com',
    'phone': '8095187009',
    'address': 'Bangalore'
  }, {
    'name': 'Muhammed',
    'email': 'shanid@shanid.com',
    'phone': '8095187009',
    'address': 'Bangalore'
  }];

  $scope.addNew = function(personalDetails) {
    $scope.personalDetails.push({
      'name': personalDetails.name,
      'email': personalDetails.email,
      'phone': personalDetails.phone,
      'address': personalDetails.address,

    });
    $scope.PD = {};
    localStorage['tasksList'] = JSON.stringify($scope.personalDetails);
    $scope.personalDetails = angular.copy($scope.personalDetails);
  };

  $scope.remove = function(name) {
    var index = -1;
    var comArr = eval($scope.personalDetails);
    for (var i = 0; i < comArr.length; i++) {
      if (comArr[i].name === name) {
        index = i;
        break;
      }
    }
    if (index === -1) {
      alert("Something gone wrong");
    }
    $scope.personalDetails.splice(index, 1);
  };

  // MODAL WINDOW
  $scope.open = function(customer) {

    var modalInstance = $modal.open({
      controller: "ModalInstanceCtrl",
      templateUrl: 'myModalContent.html',
      resolve: {
        customer: function() {
          return customer;
        }
      }
    });

  };

});
app.controller('ModalInstanceCtrl', function($scope, $modalInstance, customer) {
  $scope.customer = customer;

  $scope.ok = function(customer) {

    $modalInstance.close($scope.customer);
  };

});

//]]>

样式.css

/* 
  Credit: http://www.sanwebe.com/2013/10/css-html-form-styles
*/

.elegant-aero {
  margin-left:auto;
  margin-right:auto;
  margin-top: 25px;
  max-width: 600px;
  background: #D2E9FF;
  padding: 20px 20px 20px 20px;
  font: 12px Arial, Helvetica, sans-serif;
  color: #666;
}

.elegant-aero label {
  display: block;
  margin: 0px 0px 5px;
}

.elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea {
  color: #888;
  width: 60%;
  padding: 0px 0px 0px 5px;
  border: 1px solid #C5E2FF;
  background: #FBFBFB;
  outline: 0;
  -webkit-box-shadow:inset 0px 1px 6px #ECF3F5;
  box-shadow: inset 0px 1px 6px #ECF3F5;
  font: 200 12px/25px Arial, Helvetica, sans-serif;
  height: 30px;
  line-height:15px;
  margin: 2px 6px 16px 0px;
}

.elegant-aero textarea{
  height:100px;
  padding: 5px 0px 0px 5px;
  width: 60%;
}

.elegant-aero div {
  display:inline-block;
  vertical-align:top;
  color: red;
  margin-top: 5px;
}

让我向您展示我的 plunker，它运行良好:https://plnkr.co/edit/zHzQU09RI6bKcDtC8bzy?p=preview

请帮我解决这个问题。如果有人帮助我，我将不胜感激。

最佳答案

有一些引用在您的机器上运行时不会加载，如下更改它们，

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js'></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"  ></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<script src="sample.js"></script>

关于css - 使用 angularjs 的 Bootstrap 模式在 plunker 或 jsfiddle 中工作，但在本地不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39548730/

24 4 0
文章推荐： javascript - HTML 中的数组方法
文章推荐： javascript - 基本 if 语句 脑放屁 HTML javascript
文章推荐： javascript - 向 JavaScript 字符串插值生成的字符串添加一对反引号的优雅方法？
文章推荐： javascript - ajax 方法的范围有何不同
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com