Question

我是AngularJS的新手，现在面临着uirouter多个视图的问题。搜索了各种示例，但找不到解决方案。希望你会帮忙。我在嵌套视图中的控制器内部有一个提交函数。当用户点击提交时，必须调用subt_click（），并且必须根据提供的日期创建网址，并且应该从该网址调用数据并显示在表格中。

<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：

      <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>

以下是检查代码的内容：plunker：http://plnkr.co/edit/3Iyao5aOt2tY7Ze104dp?p=preview。

显示的表是空的，而不是来自url的数据（使用的URL来自本地主机）。控制台和console.log（响应）没有错误我可以从url看到数组对象。

我不确定这出错的地方。如果有人能提供帮助，我们将非常感激!!

Answer 1

检查plunker。我添加了一个控制器，一个虚拟服务来获取数据，并使用resolve中的服务将数据注入控制器。

在AngularJS

1 个答案: