Fatal编程技术网
  • angularjs/
  • Angularjs 带控制器的Ng视图

Angularjs 带控制器的Ng视图

angularjs

Angularjs 带控制器的Ng视图,angularjs,Angularjs,我是AngularJS的新手，我正在尝试输入给定的日期和URL以从中获取JSON数据。例如：；我有URL:，所以URL中的数据将为不同的日期提供不同的值。现在，我想根据所选日期显示数据，并在单个页面中显示它（不刷新页面）。我还想在表中显示来自此URL的数据 以下是我目前的情况： <!DOCTYPE html> <html ng-app="app"> <head> <title>Sample</title> <script src

我是AngularJS的新手，我正在尝试输入给定的日期和URL以从中获取JSON数据。例如：；我有URL:，所以URL中的数据将为不同的日期提供不同的值。现在，我想根据所选日期显示数据，并在单个页面中显示它（不刷新页面）。我还想在表中显示来自此URL的数据

以下是我目前的情况：

<!DOCTYPE html> 
<html ng-app="app">
<head>
<title>Sample</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js'></script>
    <script>
            var app = angular.module('app', []);
            app.config(['$routeProvider',function ($routeProvider) {
            $routeProvider
            .when('/date', {
            templateUrl: 'table.html',
            controller: 'MainCtrl'
        })
}]);
app.controller('MainCtrl', function ($scope, $http) {
    $scope.info = {
        sel: " "
    };
    $http.get("http://192.168.2.1/info/posts?seldate=" + $scope.info.sel)
    .success(function (response) {
    $scope.condition = response.Table1
    });
});
</script>
    </head>
<body>    
<div ng-controller="MainCtrl">
    <div>
        Date: <input type="text" ng-model="info.sel">
    </div>
     <div>
        <a href="#/date"><input type="button" value="Submit" /></a>    
     </div>
<div ng-view>
</div>
</div>
</body>
</html>


样品
var-app=angular.module（'app'，[]）；
app.config（['$routeProvider'，函数（$routeProvider）{
$routeProvider
.when（“/date”{
templateUrl:'table.html'，
控制器：“MainCtrl”
})
}]);
app.controller（'MainCtrl'，函数（$scope，$http）{
$scope.info={
sel:“
};
$http.get（“http://192.168.2.1/info/posts?seldate=“+$scope.info.sel）
.成功（功能（响应）{
$scope.condition=response.Table1
});
});
日期：
这里的表1来自URL，它包含JSON数据。下面是我在上面的代码中使用的table.html：

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Designation</th>
            <th>Qualification</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="x in condition">
            <td>{{x.ID}}</td>
            <td>{{x.Name}}</td>
            <td>{{x.Designation}}</td>
            <td>{{x.Qualification}}</td>           
        </tr>    
    </tbody>
</table>


身份证件
名称
任命
资格
{{x.ID}
{{x.Name}
{{x.Designation}}
{{x.Qualification}}
现在的问题是，当我输入日期并单击submit时，我只能看到表格标题，而其中没有任何内容。我还确保URL没有问题，并且工作正常。请为此提供解决方案。我真的需要这个。提前谢谢

首先，我建议您使用它，它为布线和嵌套视图提供了更大的灵活性

我认为最好是在每个视图的专用控制器中分离逻辑，并使用route参数来检索正确的日期

例如，您的路线如下所示：

 $routeProvider
        .when('/date/:date', {      //this add a parameter to your route
        templateUrl: 'table.html',
        controller: 'DateViewCtrl'      //this defines the controller for this ng-view scope
    });
然后将逻辑拆分为两个控制器，即MainCtrl:

app.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.info = {
        sel: " "
    };
}]);
对于DateViewCtrl，类似于以下内容：

app.controller('DateViewCtrl', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {

    $scope.condition = [];
    $http.get("http://192.168.2.1/info/posts?seldate=" + $routeParams.date)
    .success(function (response) {
        $scope.condition = response.Table1;
    });
}]);
然后更新链接：

   <a ng-href="#/date/{{your-date}}"><input type="button" value="Submit" /></a>
按钮似乎未绑定到任何事件处理程序。试一试

移除封装的
标签

在控制器中添加
ladData
功能


app.controller('MainCtrl', function ($scope, $http) {
    $scope.info = {
        sel: " "
    };
    $scope.loadData=function() {
       $http.get("http://192.168.2.1/info/posts?seldate=" + $scope.info.sel)
       .success(function (response) {
          $scope.condition = response.Table1
        });
    }
});



在工作中最好使用最新版本的angularJS

因此，我们可以将您的脚本链接更改为以下内容


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.js"></script>


您的控制器应该如下所示：


app1.controller('MainCtrl', function ($scope, $http, $location) {
        $scope.info = {
            sel: " "
        };

        $scope.subt_click = function () {
            $http.get("http://192.168.2.1/info/posts?seldate=" + $scope.info.sel)
                .then(function success(response) {
                    // Your success callback
                    $scope.condition = response.Table1
                },
                    function error() {
                        // Error callback
                    }
                );
            // populate your ng-view with table
            $location.path('/date');
        };

    });


我们需要调用函数$scope.subt_在用户单击提交按钮时单击。我们可以使用ng click指令来实现这一点


<input type="button" value="Submit" ng-click="subt_click()" />






所以，你的整个页面看起来像这样


<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.js"></script>
    <script>
        var app1 = angular.module('app', ['ngRoute']);
        app1.config(['$routeProvider', function ($routeProvider) {
            $routeProvider
            .when('/date', {
                templateUrl: 'table.html',
                controller: 'MainCtrl'
            })
            .otherwise(
                {
                    template : '<h1> Home </h1>'
                }
            )
        }]);
        app1.controller('MainCtrl', function ($scope, $http, $location) {
            $scope.info = {
                sel: " "
            };

            $scope.subt_click = function () {
                $http.get("http://192.168.2.1/info/posts?seldate=" + $scope.info.sel)
                    .then(function success(response) {
                        // Your success callback
                        $scope.condition = response.Table1
                    },
                        function error() {
                            // Error callback
                        }
                    );
                // populate your ng-view with table
                $location.path('/date');
            };

        });
    </script>
</head>
<body>
    <div ng-controller="MainCtrl">
        <div>
            Date: <input type="text" ng-model="info.sel">
        </div>
        <div>
            <input type="button" value="Submit" ng-click="subt_click()" />
        </div>
        <div ng-view>
        </div>
    </div>
</body>
</html>




样品
var app1=angular.module（'app'，['ngRoute']）；
app1.config（['$routeProvider'，函数（$routeProvider）{
$routeProvider
.when（“/date”{
templateUrl:'table.html'，
控制器：“MainCtrl”
})
.否则(
{
模板：“主页”
}
)
}]);
app1.控制器（'MainCtrl'，函数（$scope，$http，$location）{
$scope.info={
sel:“
};
$scope.subt_click=函数（）{
$http.get（“http://192.168.2.1/info/posts?seldate=“+$scope.info.sel）
.然后（功能成功（响应）{
//您的成功回访
$scope.condition=response.Table1
},
函数错误（）{
//错误回调
}
);
//用表填充ng视图
$location.path（'/date'）；
};
});
日期：


就这些

我没有测试这个代码。如果您有任何问题，请随时询问


谢谢。：）
 您应该发布一些静态json，以便我们可以看到您使用的确切数据以及您使用的日期的输入。请注意，您通过cdn加载了两个不同版本的angular。因为您的日期是空的，请查看此$scope.info={sel:“}；No info.sel是通过Hi@Pranitha更新的，实际上你想实现什么？当单击“提交”按钮时，您希望从服务器获取数据并将其填充到表中？该按钮用k包装。很抱歉我想我误解了你的问题。当用户使用日期和用户id写入此url时，他应该重定向到此表视图，该表视图必须填充来自服务器的数据？用户将从输入中选择日期，并根据该日期在表中查看url中的数据。用户将仅选择日期。来自服务器的数据将根据日期的变化而有所不同。@Pranitha能否请您将response.Table1替换为response.data.Table1。并检查在调用$http.get（）时是否有任何调用发生。@Pranitha，我刚刚创建了一个API并在本地机器上进行了测试。它工作得很好。请在成功和错误函数$http.get（）@Pranitha中提供一个断点，当前工作流程是，在输入中输入日期，单击提交按钮，它将调用服务器操作以获取数据，它将把url重写为'baseUrl+#/date'，然后在成功函数中将服务器数据分配到范围对象条件中。这将反映在你的观点中。

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.js"></script>
    <script>
        var app1 = angular.module('app', ['ngRoute']);
        app1.config(['$routeProvider', function ($routeProvider) {
            $routeProvider
            .when('/date', {
                templateUrl: 'table.html',
                controller: 'MainCtrl'
            })
            .otherwise(
                {
                    template : '<h1> Home </h1>'
                }
            )
        }]);
        app1.controller('MainCtrl', function ($scope, $http, $location) {
            $scope.info = {
                sel: " "
            };

            $scope.subt_click = function () {
                $http.get("http://192.168.2.1/info/posts?seldate=" + $scope.info.sel)
                    .then(function success(response) {
                        // Your success callback
                        $scope.condition = response.Table1
                    },
                        function error() {
                            // Error callback
                        }
                    );
                // populate your ng-view with table
                $location.path('/date');
            };

        });
    </script>
</head>
<body>
    <div ng-controller="MainCtrl">
        <div>
            Date: <input type="text" ng-model="info.sel">
        </div>
        <div>
            <input type="button" value="Submit" ng-click="subt_click()" />
        </div>
        <div ng-view>
        </div>
    </div>
</body>
</html>