Why my resources cannot be shown on my ng-model?

Question

In my project, I use ngRoute to load the edit.php view into my index ng-view

I dont know why the ngResource result not binding to my ng-model, here is my code:

Javascript:

var app = angular.module('smodule', ['ngRoute','ngResource']);

/* Factory */
app.factory('Stocks', function($resource){

    return $resource('<?=$this->module_url;?>/stocks/:stockId', {stockId:'@stock_id'}, {
        query: {method:'GET', isArray:true},
        get: {method:'GET',isArray:true,  params:{stock_id: '@stock_id'}},
        update: {method:'PUT'}
    });
});

/* Router */
app.config(function($routeProvider) {
    $routeProvider
        .when('/stock',{
            templateUrl: 'edit.php',
            controller: 'stockDetailController'
        })
        .when('/stock/:stockId', {
            templateUrl: 'edit.php',
            controller: 'stockDetailController'
        });
});

/*Controller*/
app.controller('stockDetailController', function($scope, Stocks, $routeParams){
    console.log($routeParams.stockId);
    if ($routeParams.stockId){
        /* Update stock data */
        Stocks.get({stockId:$routeParams.stockId}, function(stock){
            $scope.stock = stock;
            console.log(stock); 
        });

    }
});

/* Bootstrap the module as ng-module */
angular.bootstrap(document, ['smodule']);

edit.php:

<div class="columns medium-8 large-8 ">
    <label>Stock name
       <input type="text" name="stock_name" ng-model="stock.name" />
    </label>
</div>

Backend return the following json

[
  {
    id: "1",
    name: "My stock name"
  }
]

I used chrome debugger to check if any result returned from the ngResource and it shown the following:

[Resource, $promise: Object, $resolved: true]
  0: id: "1",
     name: "My stock name"
  $promise: Object
  $resolved: truelength: 1

Anyone can help? Thank you.

Your service returns an array of 1 object having a name attribute. You use it as if it returned the object itself. — JB Nizet, Nov 20 '14 at 07:13
Thx @JBNizet! I have modified the returned result to a single object and remove my resource get method 'isArray:true' attribute, and then it works :) — Katrin, Nov 20 '14 at 07:44

score 1 · Answer 1 · answered Nov 20 '14 at 07:49

Thx @JBNizet for providing the result:

The problem is because my service returns an array of 1 object having a name attribute. But I use it as if it returned the object itself

just change to factory to :

app.factory('Stocks', function($resource){
return $resource('<?=$this->module_url;?>/stocks/:stockId', {stockId:'@stock_id'}, {
    query: {method:'GET', isArray:true},
    get: {method:'GET', params:{stock_id: '@stock_id'}},
    update: {method:'PUT'}
});

});

and for the backend php return a single object result instead of an array

score -1 · Answer 2 · answered Nov 20 '14 at 07:14

-1

you are almost there just use stock in ng-modal like this way.

html

<div class="columns medium-8 large-8 ">
<label>Stock name
   <input type="text" name="stock_name" ng-model="stock" value="stock.name" />
</label>

answered Nov 20 '14 at 07:14

Adarsh Nahar

319
3
10

Why my resources cannot be shown on my ng-model?

2 Answers2