我是Angular JS的noob,我很难使用Angular JS和Spring MVC提交一个简单的Form.我收到此错误:
请求的资源不可用
mock.jsp
<%@taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core'%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@taglib prefix="security"uri="http://www.springframework.org/security/tags" %>
<!doctype html>
<html>
<head>
<title>Settings</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/workflow.css">
<link rel="stylesheet" href="css/upload.css">
<link rel="stylesheet" href="css/jquery.qtip.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="shortcut icon" href="images/logo-small.png" />
</head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('formSubmit', []);
app.controller('FormSubmitController',[ '$scope', '$http', function($scope, $http) {
$scope.list = [];
$scope.headerText = 'AngularJS Post Form Spring MVC example: Submit below form';
$scope.submit = function() {
var formData = …我是angularJS的新手.在我尝试的时候ng-repeat,我在代码中发现了一个问题(如下所示)
<ul class="dropdown-menu" role="menu" ng-init="names=findDomains()">
<li><a style="cursor:pointer" ng-repeat="x in names" ng-click="selectDomain({{ x }})">{{ x }}</a></li>
</ul>
我的想法是,我的页面上有一个下拉菜单(例如名称为"test").单击时,将显示选择,选项将显示为内容<li></li>.所有选项都按函数返回findDomains()并初始化ng-init.
当选择特定选项(内容<li></li>)时(例如,名称为"opt1"),下拉菜单的文本将使用选项名称更新("opt1"替换"test").这是通过功能实现的selectDomain()
由于显示和调用相同的内容selectDomain(),我放了两个{{x}}调用ng-repeat,希望显示相同的选项调用selectDomain().
然而,一切似乎工作正常(findDomains(),ng-repeat而第二{{x}}外<a></a>).但{{x}}内部<a></a>不能正常工作.单击选项时,下拉菜单名称不会更新.
但是selectDomain()功能很好,因为它可以用纯文本(例如ng-click="selectDomain('opt1'))工作.
任何指导？
我如何从angularjs的过滤器中对嵌套数组(2D数组)数组进行排序.这对我来说非常复杂.任何人都可以帮忙.感谢我.谢谢...
我有一个2D数组.现在我如何在ng-repeat中对它进行排序.
模板文件......
<ul>
<span ng-repeat="list in lists">
<li ng-repeat="list_ in list.list1 | orderBy:'name'">{{list_.name}}</li>
</span>
</ul>
JS档案......
$scope.lists = [
{
no : 1,
list1 : [{
name : 'A'
},
{
name : 'M'
}]},
{
no : 2,
list1 : [{
name : 'B'
}]},
{
no : 5,
list1 : [{
name : 'Z'
}]},
{
no : 3,
list1 : [{
name : 'X'
},
{
name : 'T'
}]}
]
javascript multidimensional-array angularjs angularjs-ng-repeat angularjs-filter
构建一个简单的离子应用程序,连接到我也建立的API.我将一些数据传递到视图,所有数据都出现在图像的src属性中.如果我在控制器中记录了控制器中的数据,那么src就在那里,但它没有出现在视图中 - 它来自0,如:
<img ng-src="0" src="0">
我在我的控制器中传递它,如:
.controller('VenuesController', ['$state','$scope','$http','Venue', function($state,$scope,$http,Venue){
$scope.venues = Venue.query();
$scope.showVenue = function(id){
$state.go('venues/:id',{id:id});
};
}])
并在视图模板本身:
<ion-view view-title="Venues">
<div class="list">
<a ng-repeat="venue in venues" ng-click="showVenue({{venue.id}})" class="item item-thumbnail-left">
<img ng-src="{{ venue.image-small }}">
<h2>{{ venue.name }}</h2>
<p>{{ venue.description }}</p>
</a>
</div>
</ion-view>
图像路径是一个完整的外部链接http://lorempixel.com/100/100/?51467,不确定我是否在这里遗漏了什么？
javascript angularjs angularjs-ng-repeat ionic-framework ionic
所以我终于让我的应用程序工作到它获得JSON请求的正确URL.但是现在我无法使用该URL.
我知道该服务正在从Google Maps API返回承诺,我可能不应该这样做,但如果我将其删除,我会收到"Weather.getWeather is undefined"错误.我不知道为什么.
我怎样才能让它正常工作.谢谢你的帮助.
weatherService.getWeather = function(city) {
var coordsUrl = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + city;
return $http.get(coordsUrl)
.success(function(data) {
var coords = data.results[0].geometry.location.lat + ',' + data.results[0].geometry.location.lng;
return getWeatherData(coords);
});
function getWeatherData(coords) {
var deferred = $q.defer(),
apiKey = 'cbbdddc644184a1d20ffc4a0e439650d',
weatherUrl = 'https://api.forecast.io/forecast/' + apiKey + '/' + coords + '?callback=JSON_CALLBACK';
$http.jsonp(weatherUrl)
.success(function(data) {
deferred.resolve(data);
}).error(function(err) {
deferred.reject(err);
});
console.log(weatherUrl);
return deferred.promise;
}
};
控制器:
vm.fetchWeather = function(city) {
Weather.getWeather(city)
.then(function(data) {
console.log(data);
vm.place = data;
});
};
标记
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular I</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body ng-app="app">
<section ng-controller="mainCtrl">
<h1>My App</h1>
<p>{{name}}</p>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-resource.min.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js
var app = angular.module('friendsList', []);
app.controller('mainCtrl', function($scope) {
$scope.name = "Leon Gaban";
})
我包括angular.min,angular-route甚至角度资源和动画......
解决了
因此,在查看您的回复并对我的代码进行细微更改之后,我发现了一个简单的拼写错误,这使我无法达到我追求的结果.所以,非常感谢大家帮忙解决了我的错误,我现在已将控制器分开,一切都按计划进行!
----
我目前正在Visual Studio 2015中使用Cordova,Ionic和AngularJS开发混合移动应用程序.由于我的单个controller.js文件中包含大量代码,我想分离代码,因此我有一个.js控制器文件每个模板; 而不是一个文件中的所有内容.不幸的是,我不明白如何解决这个问题(仍然学习AngularJS).我已经完成了一些研究但是我见过的大多数例子都显示了一个非常简单的演示,我用我自己的代码复制但是它仍然不起作用.所以我希望有人能给我一个洞察我可能出错的地方.
/ www中的文件结构
- 的index.html
/ JS
app.js
controllers.js
/ JS /控制器
login.js
sales.js
/模板
的login.html
sales.html
/ js/app .js
angular.module('main', ['ionic', 'main.controllers', 'chart.js', 'ngCordova', 'ngIOS9UIWebViewPatch', 'angular.filter'])
.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$stateProvider
.state('login', {
cache: false,
url: "/login",
templateUrl: "templates/login.html",
controller: "LoginCtrl"
})
.state('sales', {
cache: false,
url: "/sales",
templateUrl: "templates/sales.html",
controller: "SalesCtrl"
})
$urlRouterProvider.otherwise('/login')
$ionicConfigProvider.views.swipeBackEnabled(false);
});
/js/controllers.js
angular.module('main.controllers', ['ionic', 'ngCordova']);
/js/controllers/login.js
angular.module('main.controllers', [])
.controller("LoginCtrl", function ($scope, $state, $cordovaSQLite, $timeout, $ionicPopup, $cordovaDevice, $ionicLoading, $cordovaKeyboard, …javascript angularjs angularjs-controller angularjs-module ionic-framework
//controller pour connection to API
.controller('LoginConnect', ['$scope','connecting','sendtoken','$state',
function($scope,connecting,sendtoken,$state){
var token = [];
$scope.user = {};
var users = $scope.user;
var cgtpage = false;
$scope.connect = function (users,token,$state) {
var log = $scope.user.login;
var pass = $scope.user.password;
var mydata = {};
connecting.login(log,pass).then(function(result){
var montoken = result.data.token;
sessionStorage.setItem('token',montoken);
console.log(montoken);
});
var mytoken = sessionStorage.getItem('token');
sendtoken.send(mytoken).then(function(userdata){
//email
var email = userdata.data.login;
sessionStorage.setItem('useremail',email);
//prestation de services
//vente de marchandises
//période déclaration
var declar_period = userdata.data.declaration_period;
sessionStorage.setItem('userdeclar_period',declar_period);
//Bénéficiaire ACCRE
var accre = userdata.data.has_accre;
sessionStorage.setItem('useraccre',accre);
//Prénom …javascript angularjs angularjs-scope angular-ui-router ionic-framework
我正在构建一个angularjs应用程序,它有各种控制器.对于两个控制器,我依赖注入相同的服务.是为每个注入它的控制器创建的服务的单独实例吗？
我的角度应用程序不处理$ http调用中的错误.
我有一个$httpProvider我$q.reject(response)在errorResponse中返回的文档所需的位置.在控制台中角度刚刚放置angular.min.js:99 GET http://localhost:8080/my/api 500 (Internal Server Error).
码
console.log('before');
$http.get('/my/api', function(response){
console.log('ok');
console.log(response);
}, function(response){
console.log('not ok');
console.log(response)
});
console.log('after');
我只是得到'之前','之后'和上面的信息.
同样在网络选项卡中,我从服务器获得预期响应,状态为500,正文中包含json内容.
除了没有返回$ q.reject()的$ httpProvider的errorResponse,可能是什么问题？
asynchronous promise angularjs angularjs-http angular-promise
我用下面的方法和输出数据插入到两个变量,当我改变$ scope.contactRole值那么"contactRoleForTrace"的值也在不断变化流汗从数据库中值,但我不想改变它你能告诉我怎么办？
var contactRoleForTrace = [];
$scope.getUserRoles = (function () {
//Method to get data from database
intakeAppFactory.getRoles(item)
.success(function (data) {
contactRoleForTrace = data;
$scope.contactRole = data;
}).error(function (data, status) {
$scope.error = "An Error has occured!";
});
});
我写了以下代码:
<style>
.dotted {
border:dotted;
}
</style>
....
<p ng-style = "mystyle" ng-class="dotted "> {{ answer }} </p>
我的目的是
元素将放在虚线边框线内.它不起作用.我查看了Angular文档(https://docs.angularjs.org/api/ng/directive/ngClass),我看到了:
如果表达式求值为字符串,则该字符串应为一个或多个以空格分隔的类名.
我知道ng-class可能包含我在-tag中定义的类名.那么......我做错了什么？
我使用j时有一个问题.我有一个字符串=> "c:0.1|d:0.2",我需要像这样输出=>c:10%?d:20%
angularjs ×12
javascript ×10
promise ×2
arrays ×1
asynchronous ×1
css ×1
forms ×1
ionic ×1
java ×1
ng-class ×1
spring-mvc ×1