您的位置: 首页  >  技术问答  >  从PHP / HTML传递用户数据到AngularJS

从PHP / HTML传递用户数据到AngularJS

分类: 技术问答 • 2022-03-21 23:48:18

从PHP / HTML传递用户数据到AngularJS

问题描述：

我是新来AngularJS，现在还在学习，但我没有看到这个问题问的任何地方在这个网站。我建立一个传统的HTML / PHP的网站列表传递数据，例如索引页的目录ID到列表页（ listr。 npctimes.com ）。

I am new to AngularJS and am still learning but I didn't see this question asked anywhere on this site. I am building a traditional html/php list website that passes data such as a list id from an index page to a list page (listr.npctimes.com).

在与angularJS我意识到了一些初步的演奏，它的强度是在一个页面的Web应用程序，所以我不再试图与整个网站，以适应它，并希望创建一个web应用程序的用户修改列表中选中的列表页。不幸的是我还没有想出如何让从获取数据列表ID在url（ listr.npctimes.com/list.php?id=1 例如）到angularJS控制器，使得控制器可以请求从特定列表的列表中的项目。

After some initial playing with angularJS I realized that it's strength is on a single page web app so I stopped trying to fit it with the entire site and want to create a web app for the user to modify the selected list on the list page. Unfortunately I haven't figured out how to get the list id from the GET data in the url (listr.npctimes.com/list.php?id=1 for example) to the angularJS controller so that the controller can request the list items from the specific list.

PHP / HTML（带AngularJS） 

<?php $list_id = $_GET['id']; ?>

<div data-ng-app="listApp" data-ng-controller="listCtrl">
  <ul data-ng-repeat="list in lists | orderBy:'edit_date':true">
    <li>
      <a href="#">{{ list.name }}</a>
    </li>
  </ul>
</div>

角JS控制器 

listApp.controller("listCtrl", function ($scope, $http) {
  $http.get("http://listr.npctimes.com/php/items.php?list_id=1").success(function (response) {
    $scope.lists = response;
  });
});

目前的LIST_ID是在控制器硬$ C $光盘angularJS HTTP GET请求，但我想，以获得PHP LIST_ID变量的angularJS控制器，这样我可以用它来要求项目从正确的列表中设置了摆在首位的Web应用程序。

Currently the list_id is hardcoded in the controller http get request in angularJS but I would like to get the PHP list_id variable to the angularJS controller so that I can use it to request the items from the proper list to set up the web app in the first place.

该items.php文件返回简单的JSON它看起来像

The items.php file returns simple JSON which looks like

[{"id":"1","list_id":"1","name":"Renew Truck Registratiion","create_date":"September 2, 2014 07:20 PM","edit_date":"November 30, -0001 12:00 AM","checked":"0","rank":"0","notes":""},{"id":"2","list_id":"1","name":"Rental Showing on Thursday","create_date":"September 2, 2014 07:20 PM","edit_date":"November 30, -0001 12:00 AM","checked":"0","rank":"0","notes":""}]

和可以在 http://listr.npctimes.com/php加载/items.php?list_id=1

我已经试过

我发现使用位置变量，试图拉得变了URL的一对夫妇的职位，但每当我试图使用位置崩溃整个控制器。

I found a couple posts on using the location variable to try to pull the get variable out of the url but whenever I try to use location it crashes the entire controller.

我已经使用PHP来设置一个隐藏元素的值在HTML和在angularJS控制器使用jQuery拔不出来也尝试过，但是这导致了一个未定义变量。

I have also tried using php to set the value of a hidden element in the HTML and pull it out using jQuery in the angularJS controller but this has resulted in an "undefined" variable.

任何帮助AP preciated！谢谢！

Any help is appreciated! Thanks!

答

您不应使用＆LT; PHP ...＆GT; 或连结 PHP 网​​站或像在你的角前端的东西，因为一旦你决定使用角度，它指所有前端是建立与棱角分明， PHP 是服务器端语言。只需发送请求给服务器端，然后接收数据并显示...

You shouldn't use <?php ... ?> or link to PHP site or something like that in your Angular front-end, because once you decide to use Angular, its mean all your front-end is built with Angular, PHP is server side language. Just send request to server side, then receive data and display...

要通过传递/获取参数，你可以在 $ routeProvider 配置。

To passing passing/getting parameters, you can config in $routeProvider.

在你的 app.js ：

angular.module('exampleApp', [
  'ngRoute'  
])
.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        action: 'home'
      })
      .when('/list/:itemId', {
        templateUrl: 'views/item.html',
        action: 'lists'
});
});

然后，您加载列表到你的主页后，可以为每个项目设置的href：

Then, after you loaded the list into your home page, you can set href for each item:

<div data-ng-app="exampleApp" data-ng-controller="listCtrl">
  <ul data-ng-repeat="list in lists | orderBy:'edit_date':true">
    <li>
      <a href="#/list/{{list.id}}">{{ list.name }}</a>
    </li>
  </ul>
</div>

现在在你的 itemCtrl ，您可以处理 $ routeParams 提供商列表标识

Now in your itemCtrl, you can handle the list id by $routeParams provider

angular.module('exampleApp.controllers', [])
    .controller('itemCtrl', function ($scope, $sce, $route, $routeParams, $http){   
      $scope.$on("$routeChangeSuccess", function( $currentRoute, $previousRoute ){
          if( $routeParams.itemId ){
             // use http to get the item which has id = $routeParams.itemId

          }
       });
});

希望这有助于任何问题，你可以发布的注释

Hope this help, any problems you can post as the comment

相关推荐