Php 使用ng视图加载表单时未提交表单
我已经配置了angularjs文件，以便在按下导航栏中的“添加项目”按钮时加载视图，但是当我尝试提交表单时，什么也没有发生。但是如果我单独加载php文件，它就可以正常工作，并将数据添加到json文件中Php 使用ng视图加载表单时未提交表单,php,html,angularjs,Php,Html,Angularjs,我已经配置了angularjs文件，以便在按下导航栏中的“添加项目”按钮时加载视图，但是当我尝试提交表单时，什么也没有发生。但是如果我单独加载php文件，它就可以正常工作，并将数据添加到json文件中 <head> <title></title> <link href="almstyle.css" type="text/css" rel="stylesheet"> <link href="Framework/css
<head>
<title></title>
<link href="almstyle.css" type="text/css" rel="stylesheet">
<link href="Framework/css/mycss.css" type="text/css" rel="stylesheet">
<link href="Framework/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="Framework/js/jquery-3.1.1.min.js"></script>
<script src="Framework/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<!-- Start of header -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h4 id="banner">LOGO</h4>
</div>
</div>
<!-- End of header -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header navbar-left">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#!home">Home <span class="sr-only">(current)</span></a></li>
<li><a href="hairtab.html">Hair</a></li>
<li><a href="#!cart">Shop</a></li>
<li><a href="News.html">News</a></li>
<li><a href="#!addItem">Add Item</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">LifeStyle <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Food</a></li>
<li><a href="#">Passion</a></li>
<li><a href="#">Travel</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-ng-view></div>
</div>
<script type="text/javascript" src="https://code.angularjs.org/1.6.5/angular.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="home/home.js"></script>
<script src="addItem/addItem.js"></script>
</body>
</html>
<head>
<title></title>
<link href="almstyle.css" type="text/css" rel="stylesheet">
<link href="Framework/css/mycss.css" type="text/css" rel="stylesheet">
<link href="Framework/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="Framework/js/jquery-3.1.1.min.js"></script>
<script src="Framework/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<!-- Start of header -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h4 id="banner">LOGO</h4>
</div>
</div>
<!-- End of header -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header navbar-left">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#!home">Home <span class="sr-only">(current)</span></a></li>
<li><a href="hairtab.html">Hair</a></li>
<li><a href="#!cart">Shop</a></li>
<li><a href="News.html">News</a></li>
<li><a href="#!addItem">Add Item</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">LifeStyle <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Food</a></li>
<li><a href="#">Passion</a></li>
<li><a href="#">Travel</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-ng-view></div>
</div>
<script type="text/javascript" src="https://code.angularjs.org/1.6.5/angular.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="home/home.js"></script>
<script src="addItem/addItem.js"></script>
</body>
</html>
标志
切换导航
-
<head>
<title></title>
<link href="almstyle.css" type="text/css" rel="stylesheet">
<link href="Framework/css/mycss.css" type="text/css" rel="stylesheet">
<link href="Framework/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="Framework/js/jquery-3.1.1.min.js"></script>
<script src="Framework/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<!-- Start of header -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h4 id="banner">LOGO</h4>
</div>
</div>
<!-- End of header -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header navbar-left">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#!home">Home <span class="sr-only">(current)</span></a></li>
<li><a href="hairtab.html">Hair</a></li>
<li><a href="#!cart">Shop</a></li>
<li><a href="News.html">News</a></li>
<li><a href="#!addItem">Add Item</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">LifeStyle <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Food</a></li>
<li><a href="#">Passion</a></li>
<li><a href="#">Travel</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-ng-view></div>
</div>
<script type="text/javascript" src="https://code.angularjs.org/1.6.5/angular.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="home/home.js"></script>
<script src="addItem/addItem.js"></script>
</body>
</html>
<?php
$message = '';
$error = '';
if(isset($_POST["submit"]))
{
if(empty($_POST["item"]))
{
$error = "<label class='text-danger'>Enter Item Name</label>";
}
else if(empty($_POST["id"]))
{
$error = "<label class='text-danger'>Enter Item Id</label>";
}
else if(empty($_POST["size"]))
{
$error = "<label class='text-danger'>Enter a size for your item</label>";
}
else if(empty($_POST["price"]))
{
$error = "<label class='text-danger'>Enter a suitable price for the item</label>";
}
else
{
if(file_exists('items.json'))
{
$current_data = file_get_contents('items.json');
$array_data = json_decode($current_data, true);
$extra = array(
'item' => $_POST['item'],
'id' => $_POST["id"],
'selected' => $_POST["selected"],
'prices' => [[
'size' => $_POST["size"],
'price' => $_POST["price"]
]]
);
$array_data[] = $extra;
$final_data = json_encode($array_data);
if(file_put_contents('items.json', $final_data))
{
$message = "<label class='text-success'>The Item has been added successfully</p>";
}
}
else
{
$error = 'JSON File does not exist';
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Add items</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container" style="width:500px;">
<h3 align="">Add items</h3><br />
<form method="post">
<?php
if(isset($error))
{
echo $error;
}
?>
<br />
<label>Item Name</label>
<input type="text" name="item" class="form-control" /><br />
<label>Item Id</label>
<input type="text" name="id" class="form-control" />
<input type="hidden" name="selected" value="0" class="form-control" hidden="hidden"/><br />
<div class="panel panel-default">
<div class="panel panel-heading">
Prices
</div>
<div class="panel panel-body">
<label>Size</label>
<input type="text" name="size" class="form-control" />
<label>Price</label>
<input type="number" name="price" class="form-control" />
</div>
<br />
</div>
<input type="submit" name="submit" value="Add Item" class="btn btn-info" /><br />
<?php
if(isset($message))
{
echo $message;
}
?>
</form>
</div>
<br />
</body>
<head>
<title></title>
<link href="almstyle.css" type="text/css" rel="stylesheet">
<link href="Framework/css/mycss.css" type="text/css" rel="stylesheet">
<link href="Framework/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="Framework/js/jquery-3.1.1.min.js"></script>
<script src="Framework/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<!-- Start of header -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h4 id="banner">LOGO</h4>
</div>
</div>
<!-- End of header -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header navbar-left">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#!home">Home <span class="sr-only">(current)</span></a></li>
<li><a href="hairtab.html">Hair</a></li>
<li><a href="#!cart">Shop</a></li>
<li><a href="News.html">News</a></li>
<li><a href="#!addItem">Add Item</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">LifeStyle <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Food</a></li>
<li><a href="#">Passion</a></li>
<li><a href="#">Travel</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-ng-view></div>
</div>
<script type="text/javascript" src="https://code.angularjs.org/1.6.5/angular.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="home/home.js"></script>
<script src="addItem/addItem.js"></script>
</body>
</html>
<head>
<title></title>
<link href="almstyle.css" type="text/css" rel="stylesheet">
<link href="Framework/css/mycss.css" type="text/css" rel="stylesheet">
<link href="Framework/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="Framework/js/jquery-3.1.1.min.js"></script>
<script src="Framework/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<!-- Start of header -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h4 id="banner">LOGO</h4>
</div>
</div>
<!-- End of header -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header navbar-left">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#!home">Home <span class="sr-only">(current)</span></a></li>
<li><a href="hairtab.html">Hair</a></li>
<li><a href="#!cart">Shop</a></li>
<li><a href="News.html">News</a></li>
<li><a href="#!addItem">Add Item</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">LifeStyle <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Food</a></li>
<li><a href="#">Passion</a></li>
<li><a href="#">Travel</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-ng-view></div>
</div>
<script type="text/javascript" src="https://code.angularjs.org/1.6.5/angular.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="home/home.js"></script>
<script src="addItem/addItem.js"></script>
</body>
</html>
<head>
<title></title>
<link href="almstyle.css" type="text/css" rel="stylesheet">
<link href="Framework/css/mycss.css" type="text/css" rel="stylesheet">
<link href="Framework/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="Framework/js/jquery-3.1.1.min.js"></script>
<script src="Framework/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<!-- Start of header -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h4 id="banner">LOGO</h4>
</div>
</div>
<!-- End of header -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header navbar-left">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#!home">Home <span class="sr-only">(current)</span></a></li>
<li><a href="hairtab.html">Hair</a></li>
<li><a href="#!cart">Shop</a></li>
<li><a href="News.html">News</a></li>
<li><a href="#!addItem">Add Item</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">LifeStyle <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Food</a></li>
<li><a href="#">Passion</a></li>
<li><a href="#">Travel</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-ng-view></div>
</div>
<script type="text/javascript" src="https://code.angularjs.org/1.6.5/angular.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="home/home.js"></script>
<script src="addItem/addItem.js"></script>
</body>
</html>
名称：
电子邮件：
<head>
<title></title>
<link href="almstyle.css" type="text/css" rel="stylesheet">
<link href="Framework/css/mycss.css" type="text/css" rel="stylesheet">
<link href="Framework/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="Framework/js/jquery-3.1.1.min.js"></script>
<script src="Framework/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<!-- Start of header -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h4 id="banner">LOGO</h4>
</div>
</div>
<!-- End of header -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header navbar-left">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#!home">Home <span class="sr-only">(current)</span></a></li>
<li><a href="hairtab.html">Hair</a></li>
<li><a href="#!cart">Shop</a></li>
<li><a href="News.html">News</a></li>
<li><a href="#!addItem">Add Item</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">LifeStyle <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Food</a></li>
<li><a href="#">Passion</a></li>
<li><a href="#">Travel</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-ng-view></div>
</div>
<script type="text/javascript" src="https://code.angularjs.org/1.6.5/angular.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="home/home.js"></script>
<script src="addItem/addItem.js"></script>
</body>
</html>
欢迎
您的电子邮件地址是：
<head>
<title></title>
<link href="almstyle.css" type="text/css" rel="stylesheet">
<link href="Framework/css/mycss.css" type="text/css" rel="stylesheet">
<link href="Framework/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="Framework/js/jquery-3.1.1.min.js"></script>
<script src="Framework/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<!-- Start of header -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h4 id="banner">LOGO</h4>
</div>
</div>
<!-- End of header -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header navbar-left">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#!home">Home <span class="sr-only">(current)</span></a></li>
<li><a href="hairtab.html">Hair</a></li>
<li><a href="#!cart">Shop</a></li>
<li><a href="News.html">News</a></li>
<li><a href="#!addItem">Add Item</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">LifeStyle <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Food</a></li>
<li><a href="#">Passion</a></li>
<li><a href="#">Travel</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-ng-view></div>
</div>
<script type="text/javascript" src="https://code.angularjs.org/1.6.5/angular.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="home/home.js"></script>
<script src="addItem/addItem.js"></script>
</body>
</html>
ng app<head>
<title></title>
<link href="almstyle.css" type="text/css" rel="stylesheet">
<link href="Framework/css/mycss.css" type="text/css" rel="stylesheet">
<link href="Framework/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="Framework/js/jquery-3.1.1.min.js"></script>
<script src="Framework/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<!-- Start of header -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h4 id="banner">LOGO</h4>
</div>
</div>
<!-- End of header -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header navbar-left">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#!home">Home <span class="sr-only">(current)</span></a></li>
<li><a href="hairtab.html">Hair</a></li>
<li><a href="#!cart">Shop</a></li>
<li><a href="News.html">News</a></li>
<li><a href="#!addItem">Add Item</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">LifeStyle <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Food</a></li>
<li><a href="#">Passion</a></li>
<li><a href="#">Travel</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-ng-view></div>
</div>
<script type="text/javascript" src="https://code.angularjs.org/1.6.5/angular.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="home/home.js"></script>
<script src="addItem/addItem.js"></script>
</body>
</html>
ng controller<head>
<title></title>
<link href="almstyle.css" type="text/css" rel="stylesheet">
<link href="Framework/css/mycss.css" type="text/css" rel="stylesheet">
<link href="Framework/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="Framework/js/jquery-3.1.1.min.js"></script>
<script src="Framework/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<!-- Start of header -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h4 id="banner">LOGO</h4>
</div>
</div>
<!-- End of header -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header navbar-left">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#!home">Home <span class="sr-only">(current)</span></a></li>
<li><a href="hairtab.html">Hair</a></li>
<li><a href="#!cart">Shop</a></li>
<li><a href="News.html">News</a></li>
<li><a href="#!addItem">Add Item</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">LifeStyle <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Food</a></li>
<li><a href="#">Passion</a></li>
<li><a href="#">Travel</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-ng-view></div>
</div>
<script type="text/javascript" src="https://code.angularjs.org/1.6.5/angular.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="home/home.js"></script>
<script src="addItem/addItem.js"></script>
</body>
</html>
ng clickng click=“formsubmit（userForm.$valid）”<head>
<title></title>
<link href="almstyle.css" type="text/css" rel="stylesheet">
<link href="Framework/css/mycss.css" type="text/css" rel="stylesheet">
<link href="Framework/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="Framework/js/jquery-3.1.1.min.js"></script>
<script src="Framework/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<!-- Start of header -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h4 id="banner">LOGO</h4>
</div>
</div>
<!-- End of header -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header navbar-left">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#!home">Home <span class="sr-only">(current)</span></a></li>
<li><a href="hairtab.html">Hair</a></li>
<li><a href="#!cart">Shop</a></li>
<li><a href="News.html">News</a></li>
<li><a href="#!addItem">Add Item</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">LifeStyle <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Food</a></li>
<li><a href="#">Passion</a></li>
<li><a href="#">Travel</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-ng-view></div>
</div>
<script type="text/javascript" src="https://code.angularjs.org/1.6.5/angular.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="home/home.js"></script>
<script src="addItem/addItem.js"></script>
</body>
</html>
<head>
<title></title>
<link href="almstyle.css" type="text/css" rel="stylesheet">
<link href="Framework/css/mycss.css" type="text/css" rel="stylesheet">
<link href="Framework/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="Framework/js/jquery-3.1.1.min.js"></script>
<script src="Framework/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<!-- Start of header -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h4 id="banner">LOGO</h4>
</div>
</div>
<!-- End of header -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header navbar-left">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#!home">Home <span class="sr-only">(current)</span></a></li>
<li><a href="hairtab.html">Hair</a></li>
<li><a href="#!cart">Shop</a></li>
<li><a href="News.html">News</a></li>
<li><a href="#!addItem">Add Item</a></li>
<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">LifeStyle <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Food</a></li>
<li><a href="#">Passion</a></li>
<li><a href="#">Travel</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-ng-view></div>
</div>
<script type="text/javascript" src="https://code.angularjs.org/1.6.5/angular.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="home/home.js"></script>
<script src="addItem/addItem.js"></script>
</body>
</html>
带角度的简单形式
提交
{{result}}
JS:
/**
*@filesource:formjs.js
*@作者：Shabeeb
*@abstract:controller-fo-HTML页面
*@package示例文件
*@版权所有（c）2014，Shabeeb
*shabeebk.com/blog
*
* */
var app=angular.module（'formExample'，[]）；
app.controller（“formCtrl”[“$scope”，“$http”，函数（$scope，$http）{
$scope.url='submit.php'；
$scope.formsubmit=函数（isValid）{
如果（有效）{
$http.post（$scope.url，{“name”：$scope.name，“email”：$scope.email，“message”：$scope.message}）。
成功（功能（数据、状态）{
控制台日志（数据）；
$scope.status=状态；
$scope.data=数据；
$scope.result=数据；
})
}否则{
警报（“表单无效”）；
}
}
}]);
提交：