Question

我正在尝试在包含两个文本字段的表单上加载json数据。 TextFields显示来自json的正确价格和数量。但是，问题是当用户更新价格和数量时，更新的价格和数量没有反映在控制器方法 - $ scope.total（）中。这是我的代码

HTML文件

<div ng-repeat="row in myData">
<input type="text" ng-model="row.price"> 
<input type="text" ng-model="row.qty"> 
</div>

JS档案

$http.get('http call’).success(function(data){
          $scope. myData = data
        })

$scope.row = {
            price :  10.0,
            qty : 2;
        };

$scope.total = function() {
      console.log($scope.row.price);
      console.log($scope.row.qty);
}

JSON - [{“price”：10.50，“qty”：3}]

不确定我在这里缺少什么？为什么更新的值没有反映在控制器中？

Answer 1

您的$scope.total函数需要在某处调用，正如@pankajparkar所述，$scope.row与指令中的row不同（仅属于ng-repeat的范围））。

这样做：

<div ng-repeat="row in myData">
<input type="text" ng-model="row.price" ng-change="total()"> 
<input type="text" ng-model="row.qty" ng-change="total()">
</div>

JS：

$http.get('http call').success(function(data){
    $scope.myData = data;
});

$scope.total = function() {
    console.log($scope.myData[0].price * $scope.myData[0].qty);
};

Answer 2

由于你的数据是一个数组，你通过througt来获取所有对象的总数：

$scope.total = function() {
    var sum = 0;
    myData.forEach(function(obj){
        sum += obj.qty * obj.price
    });

    return sum;
}

并且您需要在值更改时调用此函数。

Fiddle

数组中只有一个元素，你的函数total应该像@Joao一样回答：

$scope.total = function() {
    return $scope.myData[0].price * $scope.myData[0].qty;
};

Fiddle

Answer 3

首先，如果响应只是一个项目，那么它不应该是一个数组

它应该是单JSON，例如{"price":10.50,"qty":3}

HTML代码

<input type="text" ng-model="myData.price"> 
<input type="text" ng-model="myData.qty"> 
<button type="button" ng-click="updateTotal()">

JS CODE

$http.get('http call').success(function(data){
    $scope.myData = data;
});

$scope.total = function(){
  //now here you will get updated scope values
  console.log($scope.myData.price * $scope.myData.qty);
}

希望这对你有所帮助。

Answer 4

$ scope.total是一个函数，但它没有返回任何内容。

而不是：

var total = $scope.row.price * $scope.row.qty

尝试：

return $scope.row.price * $scope.row.qty

Angularjs从json输入文本值

4 个答案:

Fiddle

Fiddle