Question

我正在尝试编写一个webapp，它将从后端数据库中检索一组订单，逐个向用户显示每个订单，允许更新，然后再转到下一个订单。

使用纯粹的AngularJS这是可行的还是我还需要考虑jQuery？我可以在ng-repeat中显示所有订单，但我宁愿一次只显示一个。

修改

以下PHP将以

的形式返回许多记录

[{round:1, name:"Mr Smith", house:22, road:"The Street", year:2013, period:10, result:"O", amount:20}...]

到控制器NewOrderCtrl。

我想知道的是如何遍历检索到的每个记录，在ng-view中显示数据，以便更新，提交和显示下一条记录。

JS

var orderApp = angular.module('orderApp',['ngRoute']);

orderApp.config(function($routeProvider,$locationProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider
            .when("/neworder", {templateUrl: "partials/neworder.html", controller:"NewOrderCtrl"})
        .otherwise({redirectTo: '/'});
});

function NewOrderCtrl($scope,$http) {
    $http.get('php/get_orders.php')
    .success(function(data) {
        $scope.order = data;
    });
};

PHP

<?php

    include 'conn.php';

    $rs = mysql_query("SELECT d.id,
            d.number AS round,
            c.name,
            c.house,
            c.road,
                o.year,
            o.period,
                    o.result,
                    o.amount
            FROM tbldrop d
            LEFT JOIN vwcustomer c
            ON d.customer = c.id
            LEFT JOIN tblorder o
            ON d.customer = o.customer
            WHERE d.number > 0
            ORDER BY d.number, d.position");


    $items = array();
    while($row = mysql_fetch_object($rs)){
        $items[] = $row;
    }

    echo json_encode($items);

?>

neworder.html（当前显示检索到的所有记录）

<div ng-controller="NewOrderCtrl">
    <div ng-repeat="customer in order">
        <div>
            <span ng-bind="customer.name"></span><br/>
            <span ng-bind="customer.house"></span>
            <span ng-bind="customer.road"></span><br/>
        </div>
        <form role="form">
            <div class="form-group">
                <label for="result" class="control-label">Result:</label>
                <div>
            <input type="text" ng-model="customer.result" placeholder="Enter result">
                </div>
            </div>
            <div class="form-group">
                <label for="amount" class="control-label">Amount:</label>
                <div>
                    <input type="text" ng-model="customer.amount" placeholder="Enter amount">
                </div>
            </div>
        </form>
    </div>
</div>

的index.html

<!DOCTYPE html>
<html lang="en" ng-app="orderApp">
<head>
    <base href="/rounds/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <title>Rounds</title>
</head>
<body>
    <div class="container">
        <ng-view></ng-view>
    </div>
    </div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
</body>
</html>

Answer 1

为了给出一个完整的答案，我们需要一些代码样本甚至是一个jsfiddle来玩，但作为一般答案，是的，这完全有可能只有angularjs。

由于我的信息量非常有限，我建议做这样的事情：

控制器：

$scope.items = [];
$http({method: 'GET', url: '/someUrl'}).success(function(data) {
  $scope.items = data;
});

$scope.itemIndex = 0;
$scope.nextItem = function() {
    if ($scope.items[$scope.itemIndex + 1]) {
        $scope.itemIndex++;
    }
};

HTML：

{{ items[itemIndex] }}
<button ng-click="nextItem()">Next</button>

这是一个使用$ timeout而不是$ http来模拟服务器响应时间的JSFiddle：http://jsfiddle.net/Z5chE/

使用AngularJS循环/更新数据

1 个答案: