AngularJSの新機能で、複数のビューを持つuirouterの問題に直面しています。さまざまな例を検索しましたが、解決策が見つかりませんでした。あなたがお役に立てば幸いです。 私は、コントローラ内にネストされたビューのsubmit関数を持っています。ユーザーがサブミットをクリックすると、subt_click()が呼び出され、指定された日付に基づいてURLを作成し、そのURLからデータを呼び出して表に表示する必要があります。AngularJSのUIRouterのマルチビュー/ネストされた状態でのHttpget()の呼び出し
<div ng-controller="MyController as ctrl">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-5">
<p class="input-group">
<input type="text" class="form-control" datetime-picker="yyyy-MM-dd HH:mm" ng-model="dates.date3" is-open="ctrl.open.date3" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'date3')"><i class="fa fa-calendar"></i></button>
</span>
</p>
</div>
</div>
</form>
<a ui-sref=".submit" class="btn btn-info" ng-click="subt_click()">Submit</a>
</div>
以下は、私が州を宣言し、subt_click()を呼び出した方法です。
app.js:
var wc = angular.module('wc', ['ui.router','ui.bootstrap', 'ui.bootstrap.datetimepicker']);
wc.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/posts');
$stateProvider
.state('tab', {
url: '/tab1',
templateUrl: 'tab.html'
})
.state('tab.submit', {
url: '/submit',
templateUrl: 'tab-submit.html',
//controller: 'MyController'
})
.state('tabs', {
url: '/tabs',
templateUrl: 'tabs.html',
});
});
wc.controller('MyController', function ($scope, $http, $location, $filter) {
var that = this;
var in10Days = new Date();
in10Days.setDate(in10Days.getDate() + 10);
$scope.dates = {
date3: " ",
date4: " "
};
this.dates = {
date3: new Date(),
date4: new Date(),
};
this.open = {
date3: false,
date4: false,
};
// Disable weekend selection
this.disabled = function (date, mode) {
return (mode === 'day' && (new Date().toDateString() == date.toDateString()));
};
this.dateOptions = {
showWeeks: false,
startingDay: 1
};
this.timeOptions = {
readonlyInput: false,
showMeridian: false
};
this.dateModeOptions = {
minMode: 'year',
maxMode: 'year'
};
this.openCalendar = function (e, date) {
that.open[date] = true;
};
$scope.format = 'yyyy-MM-dd%20HH:mm';
debugger;
$scope.subt_click = function() {
var date = $filter("date")($scope.dates.date3, $scope.format);
$http.get("URLpartA"+date+"URLpartB")
.success(function(response) {
debugger
$scope.condition = response.Table
console.log(response)
});
};
});
タブsubmit.html:plunker
:http://plnkr.co/edit/3Iyao5aOt2tY7Ze104dp?p=previewここ
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in condition">
<td>{{x.ID}}</td>
<td>{{x.Name}}</td>
</tr>
</tbody>
</table>
がコードをチェックするplunkです。
表示されている表は空であり、url(URLはローカルホストのものです)からのデータではありません。コンソールおよびconsole.log(応答)にエラーはありません。
これはどこが間違っているか分かりません。もし誰かが助けることができれば本当に感謝します!
私はあなたのプラークを試み、2つのコンソールエラーがありました。 'Datepickerディレクティブ:" ng-model "の値はDateオブジェクトでなければならず、get要求は400の不正な要求を返しました。あなたのローカルコードが動作していると仮定すると、成功コールバックの 'response'の値は何ですか? – Haymaker87
@ Haymaker87:{"ID":6、 "名前": "ジャック"}、{"ID:7"、 "名前": "ジル"}]} – Deborah
コントローラがそのビューに正しくマップされていないと想定する必要があります。あなたのルートブロックの '// controller:" MyController "'のコメントを外すとどうなりますか? – Haymaker87