Looping through/updating data using AngularJS

Question

I am trying to write a webapp that will retrieve a set of orders from a backend database, display each order to the user one by one allowing update before moving on to the next order.

Is this feasible using purely AngularJS or would I need to contemplate jQuery as well? I can display all the orders in an ng-repeat but I would rather only display them one at a time.

EDIT

The PHP below will return a number of records in the form

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

to the controller NewOrderCtrl.

What I would like to know is how to loop through each record retrieved, display the data in the ng-view so that it can be updated, submit and the next record displayed.

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 (currently displays all records retrieved)

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

You need to add more detail to your question, if you want more specific help or direction. If i am correct in my understanding of what you are wanting to accomplish this could be done in angular, but with out further specifics it is impossible to point you in a direction as I might be not be correct in my understanding of your problem. — Jared Reeves
– Jared Reeves, Commented Dec 27, 2013 at 22:00
I've added the code as it stands currently. The bit I'm stuck on is changing the controller and the partial html so only 1 record is shown at a time. — jaydubyasee
– jaydubyasee, Commented Dec 27, 2013 at 22:54

Joe · Accepted Answer · 2013-12-27 22:39:09Z

In order to give a complete answer, we would need some code samples or even a jsfiddle to play with, but as a generic answer, yes this is entirely possible with only angularjs.

With the extremely limited amount of information I have, I would suggest doing something like this:

Controller:

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

Here's a JSFiddle using $timeout instead of $http to simulate the server response time: http://jsfiddle.net/Z5chE/

Thanks. Worked just as I was expecting. Simple too - I need to brush up.

Collectives™ on Stack Overflow

Looping through/updating data using AngularJS

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related