Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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>
share|improve this question
 
Yes, it is easily feasible using only Angular. –  Stewie 16 hours ago
 
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 16 hours ago
 
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 15 hours ago
add comment

1 Answer

up vote 1 down vote accepted

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/

share|improve this answer
 
Thanks. Worked just as I was expecting. Simple too - I need to brush up. –  jaydubyasee 15 hours ago
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.