大家好，我正在研究angularjs，它在提交数据后进行表单填充验证。我可以选择编辑它。编辑我已经使用引导模式编辑。一切都很好，但问题是，当我试图运行相同的代码在本地浏览器它不工作。请帮我一下
让我给你看看代码:
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);
};
});
//]]>
style.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;
}
让我给你看看我的活塞工作良好:https://plnkr.co/edit/zHzQU09RI6bKcDtC8bzy?p =
预览请帮我一下。
当你在你的机器上运行时，有一些引用不会加载，更改它们如下，
<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>