angular js路由问题求解决，数据出不来
0
[待解决问题]
<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mycontr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="js/iconfont.css" />
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<!--<script src="https://cdn.bootcss.com/angular-sanitize/1.4.6/angular-sanitize.js"></script>-->
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: simhei;
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
table {
width: 800px !important;
margin: auto;
}
caption {
font-size: 25px;
color: black
}
a:hover {
text-decoration: none;
}
a {
display: block;
color: black;
width: 90px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 5px;
border: none;
background: #EBEBEB;
}
.but {
margin-left: 180px;
}
.aut,
.auts {
width: 800px;
margin: auto;
}
.le {
float: left;
text-align: right;
line-height: 34px;
margin-top: 15px;
}
</style>
</head>
<body >
<div ng-view=""></div>
<script type="text/ng-template" id="index.html">
<table class="table table-striped table-bordered">
<caption>用户管理</caption>
<thead>
<tr>
<th>管理操作</th>
<th>ID</th>
<th>用户名</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(j,item) in name">
<td>
<a href="#/one" class="iconfont" ng-click="demo(j)">编辑</a>
</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.position}}</td>
</tr>
</tbody>
</table>
<button class="btn btn-success but "> <a href="#/two" >添加一个新用户</a></button>
</script>
<!-- 修改用户信息 -->
<script type="text/ng-template" id="embedded.home.html">
<div class="aut">
<div class="form-group" ng-if="myvar">
<div class="row">
<div class="col-md-2 le">用户名：</div>
<div class="col-md-10 le"><input type="text" placeholder="用户名" class="form-control" ng-model="pen.user" /></div>
<div class="col-md-2 le">职位：</div>
<div class="col-md-10 le"><input type="text" placeholder="职位" class="form-control" ng-model="pen.pos" /></div>
<div class="col-md-2 le">旧密码：</div>
<div class="col-md-10 le"><input type="password" placeholder="旧密码" class="form-control" ng-model="pen.pas" /></div>
<div class="col-md-2 le">新密码：</div>
<div class="col-md-10 le"><input type="password" placeholder="新密码" class="form-control" ng-model="pen.npas" /></div>
<div class="col-md-2 le">重复新密码：</div>
<div class="col-md-10 le"><input type="password" placeholder="重新输入新密码" class="form-control" ng-model="pen.cf" /></div>
</div>
<button class="btn btn-success " ng-click="update()">保存修改</button>
</div>
</div>
</script>
<!--添加用户 -->
<script type="text/ng-template" id="embedded.about.html">
<div class="auts" ng-if="myva">
<div class="form-group">
<div class="row">
<div class="col-md-2 le">用户名：</div>
<div class="col-md-10 le"><input type="text" placeholder="用户名" class="form-control" ng-model="pen.user" /></div>
<div class="col-md-2 le">职位：</div>
<div class="col-md-10 le"><input type="text" placeholder="职位" class="form-control" ng-model="pen.pos" /></div>
<div class="col-md-2 le">密码：</div>
<div class="col-md-10 le"><input type="password" placeholder="密码" class="form-control" ng-model="pen.npas" /></div>
<div class="col-md-2 le">重复密码：</div>
<div class="col-md-10 le"><input type="password" placeholder="重新输入密码" class="form-control" ng-model="pen.cf" /></div>
</div>
</div>
<button class="btn btn-success" ng-click="add()">保存</button>
</div>
</script>
<script>
var app = angular.module("myapp", ['ngRoute']);
// app.controller('HomeController', function($scope, $route) {
// $scope.$route = $route;
// })
// .controller('AboutController', function($scope, $route) {
// $scope.$route = $route;
// })
app.controller("mycontr", function($scope, $http,$route) {
$scope.$route = $route;
$scope.pen = {};
$scope.myvar = false;
$scope.myva = false;
$scope.name = {};
//点击编辑
$scope.demo = function(j) {
$scope.j = j;
// $scope.myvar = true;
// $scope.myva = false;
}
$scope.demo1 = function() {
// $scope.myva = true;
// $scope.myvar = false;
}
$scope.demo2 = function() {
// $scope.myva = false;
// $scope.myvar = false;
}
$http({
method: 'GET',
url: 'js/data.json',
data: []
}).then(function successCallback(response) {
$scope.name = response.data.list.questions;
//添加用户
$scope.add = function() {
if(($scope.pen.user != "" && $scope.pen.user != undefined) && $scope.pen.npas != "" && $scope.pen.pos != "") {
if($scope.pen.npas == $scope.pen.cf) {
$scope.name.push({
id: $scope.name.length + 1,
name: $scope.pen.user,
password: $scope.pen.npas,
position: $scope.pen.pos
});
$scope.demo2();
$scope.pen.pas = "";
$scope.pen.pos = "";
$scope.pen.user = "";
$scope.pen.npas = "";
$scope.pen.cf = "";
} else {
alert("两次密码输入不一致哦");
$scope.pen.npas = "";
$scope.pen.cf = "";
}
} else {
alert("请填写完整");
}
}
//修改用户信息
$scope.update = function() {
if(parseInt($scope.pen.pas) == $scope.name[$scope.j].password) {
if($scope.pen.npas == $scope.pen.cf) {
$scope.demo2();
$scope.name[$scope.j].name = $scope.pen.user;
$scope.name[$scope.j].position = $scope.pen.pos;
$scope.pen.pas = "";
$scope.pen.pos = "";
$scope.pen.user = "";
$scope.pen.npas = "";
$scope.pen.cf = "";
} else {
alert("两次密码输入不正确")
$scope.pen.npas = "";
$scope.pen.cf = "";
}
} else {
alert("旧密码输入错误")
$scope.pen.pas = "";
$scope.pen.pos = "";
$scope.pen.user = "";
$scope.pen.npas = "";
$scope.pen.cf = "";
}
}
// 请求成功执行代码
}, function errorCallback(response) {
alert("777");
// 请求失败执行代码
});
})
app.config(function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'embedded.home.html',
}).
when('/about', {
templateUrl: 'embedded.about.html',
}).
when('/index', {
templateUrl: 'index.html',
}).
otherwise({
redirectTo: '/index'
});
});
</script>
</body>
</html>
所有回答(3)
0
angualrjs的路由会有一个时间的问题，我曾经在开发时，用过延迟的方法去解决，道友可以一试
0
mark....
0
路由跳转的话是不是要加上<ui-view></ui-view>