在文本框中顯示json數據

Question

我想將json數據顯示到文本框中。但它不是在文本框中顯示 我的代碼是

var app = angular.module('productApp', []); 
 
app.controller('productController', function($scope, $http) { 
 
    var x = 1054; 
 
    alert(x); 
 
    $http({ 
 
     method: 'GET', 
 
     url: 'getProduct', 
 
     params: { 
 
     id: x 
 
     }, 
 
     headers: { 
 
     'Content-Type': 'application/x-www-form-urlencoded' 
 
     } 
 
    }).success(function(response, status, headers, config) { 
 
     console.log(response); 
 
     $scope.products = response; 
 
    }) 
 
    .error(function(data, status, headers, config) { 
 
     alert("Opps unable to connect to server"); 
 
    }); 
 
}); <

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script> 
 
<div class="container"> 
 
    <div class="all-data" ng-app="productApp" ng-controller="productController"> 
 
    <form id="updateProduct" action="UpdatedProduct" method="post"> 
 
     <legend>Update Product</legend> 
 
     <div class="products" ng-repeat="p in products"> 
 
     {{p.id}}{{p.unitPrice}} 
 
     <input type="hidden" ng-model="p.id" /> 
 
     
 
     <label>Bar Code</label> 
 
     <input type="text" name="barCode" class="form-control" id="barCode" ng-model="p.barcode" /> 
 
     <label> Quantity </label> 
 
     <input type="text" name="quantity" ng-model="p.quantity" class="form-control" id="quantity" /> 
 

 
     <label>Unit Price</label> 
 
     <input type="text" name="unitPrice" ng-model="p.unitPrice" class="form-control" id="unitPrice" /> 
 

 
     <label>Selling Price</label> 
 
     <input type="text" name="sellingPrice" class="form-control" id="sellingPrice" ng-model="p.sellingPrice" data-validation="required" data-validation-error-msg="Selling price required" /> 
 
     <label>Discount Percentage</label> 
 
     <input type="text" name="discountPercentage" class="form-control" id="discountPercentage" ng-model="p.discountPercentage" /> 
 
     <label>Tax1</label> 
 
     <input type="text" name="tax1name" class="form-control" id="tax1name" ng-model="p.tax1.name" /> 
 
     <input type="hidden" name="tax1id" class="form-control" id="tax1id" ng-model="p.tax1.id" /> 
 
     <input type="hidden" name="tax1value" class="form-control" id="tax1val" ng-model="p.tax1.value" /> 
 
     <label>Tax2</label> 
 
     <input type="text" name="tax2name" class="form-control" id="tax2name" ng-model="p.tax2.name" /> 
 
     <input type="hidden" name="tax2id" class="form-control" id="tax2id" ng-model="p.tax2.id" /> 
 
     <input type="hidden" name="tax2value" class="form-control" id="tax2val" ng-model="p.tax2.value" /> 
 
     <button type="submit" class="form-control btn btn-success" style="margin-top: 10px" ng-click="update(p)">Update</button> 
 
     </div> 
 
    </div>

的json數據是

{"productList":[{"discountPercentage":3,"id":1054,"quantity":234,"sellingPrice":555.00,"tax1id":0,"tax1value":0,"tax2id":0,"tax2value":0,"unitPrice":234.00}]}

Answer 1

試試這個

}).success(function(response, status, headers, config) { 
    console.log(response); 
    $scope.products = response.productList; 
}) 

Answer 2

使用response.data.productList，

$http({ 
     method: 'GET', 
     url: 'getProduct', 
     params: { 
     id: x 
     }, 
     headers: { 
     'Content-Type': 'application/x-www-form-urlencoded' 
     } 
    }).success(function(response, status, headers, config) { 
     console.log(response); 
     $scope.products = response.data.productList; 
    }) 
    .error(function(data, status, headers, config) { 
     alert("Opps unable to connect to server"); 
    }); 

Answer 3

你要麼需要遍歷products.productList，或者分配$scope.products = response.productList。

這裏的工作例如：（我用$timeout模擬API調用）

var app = angular.module('productApp', []); 
 
app.controller('productController', function($scope, $timeout) { 
 
    var x = 1054; 
 
    alert(x); 
 

 
    $timeout(function() { 
 
    $scope.products = { 
 
     "productList": [{ 
 
     "discountPercentage": 3, 
 
     "id": 1054, 
 
     "quantity": 234, 
 
     "sellingPrice": 555.00, 
 
     "tax1id": 0, 
 
     "tax1value": 0, 
 
     "tax2id": 0, 
 
     "tax2value": 0, 
 
     "unitPrice": 234.00 
 
     }] 
 
    } 
 
    }, 1000) 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script> 
 
<div class="container"> 
 
    <div class="all-data" ng-app="productApp" ng-controller="productController"> 
 
    <form id="updateProduct" action="UpdatedProduct" method="post"> 
 
     <legend>Update Product</legend> 
 
     <div class="products" ng-repeat="p in products.productList"> 
 
     {{p.id}}{{p.unitPrice}} 
 
     <input type="hidden" ng-model="p.id" /> 
 

 
     <label>Bar Code</label> 
 
     <input type="text" name="barCode" class="form-control" id="barCode" ng-model="p.barcode" /> 
 
     <label> Quantity </label> 
 
     <input type="text" name="quantity" ng-model="p.quantity" class="form-control" id="quantity" /> 
 

 
     <label>Unit Price</label> 
 
     <input type="text" name="unitPrice" ng-model="p.unitPrice" class="form-control" id="unitPrice" /> 
 

 
     <label>Selling Price</label> 
 
     <input type="text" name="sellingPrice" class="form-control" id="sellingPrice" ng-model="p.sellingPrice" data-validation="required" data-validation-error-msg="Selling price required" /> 
 
     <label>Discount Percentage</label> 
 
     <input type="text" name="discountPercentage" class="form-control" id="discountPercentage" ng-model="p.discountPercentage" /> 
 
     <label>Tax1</label> 
 
     <input type="text" name="tax1name" class="form-control" id="tax1name" ng-model="p.tax1.name" /> 
 
     <input type="hidden" name="tax1id" class="form-control" id="tax1id" ng-model="p.tax1.id" /> 
 
     <input type="hidden" name="tax1value" class="form-control" id="tax1val" ng-model="p.tax1.value" /> 
 
     <label>Tax2</label> 
 
     <input type="text" name="tax2name" class="form-control" id="tax2name" ng-model="p.tax2.name" /> 
 
     <input type="hidden" name="tax2id" class="form-control" id="tax2id" ng-model="p.tax2.id" /> 
 
     <input type="hidden" name="tax2value" class="form-control" id="tax2val" ng-model="p.tax2.value" /> 
 
     <button type="submit" class="form-control btn btn-success" style="margin-top: 10px" ng-click="update(p)">Update</button> 
 
     </div> 
 
    </div>