使用angularjs和codeigniter在表格行中显示JSON内容
AngularJS和CodeIgniter是两个常用的Web开发框架，可以帮助开发人员快速构建前端和后端应用程序。在表格行中显示JSON内容可以通过以下步骤实现：
- 创建一个AngularJS应用程序，并引入AngularJS库文件。<!DOCTYPE html> <html ng-app="myApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script> </head> <body> <div ng-controller="myController"> <table> <tr ng-repeat="item in jsonData"> <td>{{ item.name }}</td> <td>{{ item.age }}</td> <td>{{ item.email }}</td> </tr> </table> </div> <script> var app = angular.module('myApp', []); app.controller('myController', function($scope) { $scope.jsonData = [ { name: 'John', age: 25, email: 'john@example.com' }, { name: 'Jane', age: 30, email: 'jane@example.com' }, { name: 'Bob', age: 35, email: 'bob@example.com' } ]; }); </script> </body> </html>
- 创建一个CodeIgniter控制器，并在其中加载视图文件。<?php defined('BASEPATH') OR exit('No direct script access allowed'); class MyController extends CI_Controller { public function index() { $this->load->view('my_view'); } }
- 创建一个CodeIgniter视图文件（my_view.php），并在其中显示AngularJS应用程序。<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="myController"> <table> <tr ng-repeat="item in jsonData"> <td>{{ item.name }}</td> <td>{{ item.age }}</td> <td>{{ item.email }}</td> </tr> </table> </div> </div> <script> var app = angular.module('myApp', []); app.controller('myController', function($scope) { $scope.jsonData = <?php echo json_encode($json_data); ?>; }); </script> </body> </html>
- 在CodeIgniter控制器中获取JSON数据，并将其传递给视图文件。<?php defined('BASEPATH') OR exit('No direct script access allowed'); class MyController extends CI_Controller { public function index() { $json_data = [ ['name' => 'John', 'age' => 25, 'email' => 'john@example.com'], ['name' => 'Jane', 'age' => 30, 'email' => 'jane@example.com'], ['name' => 'Bob', 'age' => 35, 'email' => 'bob@example.com'] ]; $data['json_data'] = $json_data; $this->load->view('my_view', $data); } }
通过以上步骤，我们可以在表格行中使用AngularJS和CodeIgniter来显示JSON内容。每个JSON对象的属性（name、age、email）将在表格中的不同列中显示。这样，我们可以动态地将JSON数据呈现为表格形式。
请注意，以上示例中的JSON数据是硬编码的，实际应用中，您可以从数据库或其他数据源中获取JSON数据，并将其传递给视图文件。
相关·内容
5回答
使用角JS在HTML中添加新行
javascript、angularjs
我是AngularJS新手，我有两个文本框，即名字、年龄。我想将文本框中输入的名称和年龄添加到HTML表中。当我使用下面的代码时，它将该行第一次添加到表中，如果我试图添加更多的行，它将修改表中添加的最后一行。我要在这里传递雇员对象。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/
浏览 8提问于2016-05-13得票数 1
回答已采纳
1回答
json文件中的数据未加载到AngularJS中
php、angularjs、json
为什么我的数据没有加载到表中。我想我在tag里做错了什么。它包含myModule，但我在脚本中设置了myApp。请看我的代码，尝试了所有的方法，但没有帮助。
这是我的index.php文件
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myModule">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angu
浏览 0提问于2016-01-26得票数 0
1回答
无法使用AngularJS显示请求中的数据
sql、angularjs
我正在尝试显示从名为student的SQL表中获取的数据。我有JSON对象，它包含使用PHP文件从表中检索的数据。但是我不能使用AngularJS在我的HTML文件中显示数据。这是我的myScript.js代码
var myApp = angular.module("myModule",[])
.controller("myController",function($scope,$http)
{
getData();
funct
浏览 0提问于2016-12-30得票数 1
回答已采纳
1回答
尝试在编码点火器中使用角度js
html、angularjs、codeigniter
我有一个问题，使用角js与代码点火器。我没有收到错误，但数据没有显示。我正在努力学习如何创建一个带有angularjs和Codeigniter的RESTful应用程序，如果有人有任何例子的话，请随意给我发一个链接。
CI控制器
<?php
class MasterController extends CI_Controller {
function __construct() {
parent::__construct();
}
function index() {
$data['pagetitle'] = 'Page for A
浏览 5提问于2015-03-28得票数 0
1回答
在从api获取新数据之前，如何清除/刷新表？
javascript、api、datatable
我试图从api中检索数据，每次我单击button.but按钮，老数据仍然存在，我不想要，我希望表将被重新加载，并将有新的数据从api。
const showData = document.querySelector('.showData')
const btn = document.querySelector('.shwData-btn')
btn.addEventListener('click', showdata)
function showdata(){
fetch('http://
浏览 2提问于2020-05-06得票数 0
回答已采纳
2回答
动态设置搜索模式
javascript、angularjs
我是angularjs的新手，所以要有耐心^我正在尝试angularjs。如何以动态方式设置搜索模式？我尝试过这段代码，但没有成功:(
<html>
<head>
<meta charset="utf-8">
<title>Binding</title>
</head>
<body>
<div data-ng-app="myApp">
<input type="
浏览 0提问于2013-07-12得票数 0
回答已采纳
1回答
基于下拉选择的具有文本框的表上的angularjs搜索过滤器
angularjs
我有一个表格，文本框和下拉列表。我可以根据下拉选择和文本框的值来搜索表数据。但是在文本搜索的中间，如果我改变了下拉选择，所有的数据都不会加载，除非我完全按下了我的文本框。但我的要求是在搜索过程中加载所有数据，这样我就可以在不刷新页面的情况下再次搜索。
代码如下：
angular.module("myApp", [])
.controller('myController', ['$scope', function ($scope) {
$scope.employees = [
{ 'id
浏览 2提问于2018-03-03得票数 3
4回答
为什么ng-repeat不起作用？
javascript、angularjs
ng-repeat不处理表格，在输出中只显示标题部分？因为我认为我做的绑定是非常好的，但是我遗漏了什么吗？有人能帮我解决我哪里做错了吗？
JAVA脚本：
var myapp=angular.module("MyApp",[]);
var controller=function($scope)
{
var technology1=[
{Name: "C#",Likes: 0,Dislikes: 0},
{Name: "JAVA",Likes:0,Dislikes:0},
浏览 0提问于2016-07-01得票数 1
1回答
AngularJS应用程序未加载
javascript、html、angularjs
我正在尝试制作一个简单的AngularJS应用程序：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body ng-app="myApp">
<div ng-controller="mainController">
浏览 2提问于2016-01-11得票数 2
回答已采纳
3回答
AngularJS ng-重复不列出数据
javascript、angularjs
我开始学习AngularJS，但是我被一个问题困住了。ng-repeat不会循环遍历数组中的用户。名单是空的。
这是我的密码。
app.js
var app = angular.module('myapp', []);
app.controller('dataCtrl', function ($scope) {
$scope.users = [
{ name: 'Max', age: 20 },
{ name: 'Tom', age: 42 },
{ name: '
浏览 0提问于2016-07-01得票数 1
回答已采纳
1回答
使用AngularJS打印JSON值
javascript、angularjs、json
我试图使用AngularJS从JSON端点打印一些数据。终点:- http://localhost:8081/api
JSON结构:-
{
"1": {
"venture": "XYZ Informatics",
"member": [
{
"name": "abcd",
"email": "abcd@gmail.com"
}
],
"message":
浏览 4提问于2016-06-27得票数 2
回答已采纳
6回答
Angularjs $resource不能处理从REST API返回的数组
angularjs、angularjs-ng-repeat
我正在尝试学习angularjs，并且在尝试将数据绑定到从Rest API返回的数组时遇到了障碍。我有一个简单的azure api，返回一个person对象数组。服务url为。
我的控制器代码看起来像这样：
angular.module("ToDoApp", ["ngResource"]);
function TodoCtrl($scope, $resource) {
$scope.svc = $resource('http://testv1.cloudapp.net/test.svc/persons', {
callback: '
浏览 2提问于2013-03-31得票数 14
1回答
angular.min.js:127错误：[$controller:ctrlreg] angularJs
javascript、html、angularjs
当我尝试学习angularJs时，我一直收到这个错误。请帮帮我。我是这种技术的新手，我想输出学生列表到表格中，如下所示。
谢谢!
我的studentController.js
var studentApp = angular.module("studentApp", []);
studentApp.controller("studentController", ['$scope', function($scope){
$scope.students = [
{name: 'Innocent Tan
浏览 0提问于2020-03-17得票数 0
1回答
要使表具有响应性，最好的替代方案是什么
responsive-design、html-table
我想做一个表格，但由于它在某种程度上是响应性的，我们都知道这一点。有谁知道在不使用表格标签的情况下制作表格的最佳替代方案是什么？
我已经提供了基本的表格html，请帮助我。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=devic
浏览 6提问于2017-02-01得票数 0
回答已采纳
1回答
AngularJS :处理具有相同输入名称的值
javascript、php、mysql、angularjs
我是AngularJS新手，想做表单ajax提交。我需要一些帮助或指导，关于如何传递具有相同输入名称(例如username[])的值，以便与$http.post一起使用，作为JSON的后端协助。
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
</head>
<body ng-app="myApp">
<div ng-controller="tableController as tblCtrl">
浏览 0提问于2015-09-13得票数 0
2回答
servlet不通过angularJS发送响应
javascript、angularjs、servlets
我正在尝试运行这个中的代码，但是我没有得到我应该得到的结果。我已经在Eclipse上开发了这个项目，并且在web内容文件夹上有一个html页面，在/src/AngularGET文件夹下有一个名为"AtpPlayers“的servlet。我相信我没有插入正确的urls。你能帮我个忙吗？
下面是servlet AtpPlayers.java的代码
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
re
浏览 1提问于2015-08-01得票数 1
1回答
http：：json url
angularjs、json、asp.net-mvc、asp.net-web-api
我对这段代码有问题，我有来自我的asp.net web的json数据。我无法通过angularjs获得这些数据。正如你所看到的代码；
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title ng-bind="helloAngular"></title>
<script src="~/Scripts/angular.min.js"></script>
<script>
浏览 1提问于2016-10-19得票数 0
回答已采纳
1回答
如何清除AngularJS中的输入字段
javascript、angularjs
在通过ngClick提交输入文本字段后，我试图清除html页面上的输入文本字段。
<html ng-app="myApp">
<head lang="en">
<title>Test</title>
<script>
angular.module("myApp", [])
.controller("defaultCtrl", function ($scope) {
$scope.members = [
浏览 5提问于2014-05-25得票数 1
回答已采纳
2回答
用AngularJS访问wpdb
javascript、php、angularjs、wordpress
我从AngularJS开始，我想在我的WordPress站点中使用它。
我试图打印一个包含WordPress数据库中某个表的数据的表，但无法访问WordPress函数和变量。
下面是我的一些代码。
page-demo.php
<?php
/*
* Template Name: Demo
*/
get_header();
?>
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.
浏览 1提问于2015-05-01得票数 0
1回答
如何在angular js控制器中访问php控制器中的表或变量
php、html、angularjs、codeigniter、angular-ui-router
我在codeignitor.I工作。我想从php控制器返回表格，并希望在角度js控制器中访问它。这是php控制器的代码。Table.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Table extends CI_Controller {
public function index(){
$this->load->view('home');
}
浏览 0提问于2016-02-27得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
