Question

我在我的应用程序中使用MEAN堆栈，将AngularJS作为我的前端。如何ng-bind将totalsum的值转换为Agularjs中的另一个input，实际上我们有一个表格，我们使用过滤器来获取Sprice的总计值，然后我们也获得了sprice总计值250，那么我们需要将bind这个totalsum值ng-module转换为另一个sprice totalsum输入.... 例如： - 250值为ng-bind，期望totalsum value的回答值为250，如sprice ... {{3} }。我们不知道我们在哪里犯了这个错误，所以请查看plunker并帮助我们..

我们有一个表格，在表格中我们使用了过滤器功能来获取<td>{{resultValue | sumOfValue:'sprice'}}</td>的总计值，我们得到了这个bind使用250的答案。
我们希望我们需要sprice将ng-module总计价值转移到另一个sprice_total，例如250 input..expecting answer .filter('sumOfValue', function () { return function (data, key) { debugger; if (angular.isUndefined(data) && angular.isUndefined(key)) return 0; var sum = 0; angular.forEach(data,function(v,k){ if(v.confirm=='cancelled'){ sum = sum + parseFloat(v[key]); } }); return sum.toFixed(2); } ..
我已将羽毛作为参考My Plunker，任何人都知道解决方案可以帮助我们。

我的控制器： - sprice totalsum过滤器： -

   <tr ng-repeat="ram in resultValue=(order.orderfood)  | filter: {confirm: '!cancelled'}">

                <td>{{$index + 1}}</td>
                <td>{{ram.sprice }}</td>


               </tr>
               <tr>
                 <td>sum</td>

                 <td>{{resultValue | sumOfValue:'sprice'}}</td>

               </tr>

}）

我的Html： -

<input type="text" ng-model="sprice_total" ng-bind="sprice_total={{resultValue | sumOfValue:'sprice'}}">

我尝试使用ng-bind将值传递给另一个输入，如： -

{{1}}

请更新plunker以了解解决方案......谢谢..

Answer 1

创建了myModelValue指令，将您的表达式分配给ng-model对象

以下是参考link

var app = angular.module('plunker', []);

app.directive('myModelValue', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            model: '=ngModel'
        },
        link: function (scope, element, attr, controller) {
            attr.$observe('myModelValue', function (finalValue) {
                scope.model = finalValue;
            });
        }
    };
});
app.filter('sumOfValue', function () {
    return function (data, key) {
        debugger;
        if (angular.isUndefined(data) && angular.isUndefined(key))
            return 0;
        var sum = 0;

        angular.forEach(data, function (v, k) {
            if (v.confirm == 'cancelled') {
                sum = sum + parseFloat(v[key]);
            }
        });
        return sum.toFixed(2);
    }
}).controller('MainCtrl', function ($scope) {
    $scope.order =
  {
      "_id": "5836b64083d9ce0f0078eae8",
      "user": {
          "_id": "579bdf6123f37f0e00a40deb",
          "displayName": "Table 1"
      },
      "__v": 8,
      "total": "1824",
      "ordercar": [],
      "orderfood": [
      {
          "qty": "1",
          "confirm": "placed",
          "sprice": 250,
          "price": 250,
          "customise": "With Onion,Without Onion",
          "name": "Baasha Pizza"
      },
      {
          "qty": "1",
          "confirm": "cancelled",
          "sprice": 250,
          "price": 250,
          "customise": "With Onion,Without Onion",
          "name": "Baasha Pizza"
      }
      ],
      "phone": null,
      "order_source": "",
      "comment": "",
      "payment_mode": "",
      "nop": null,
      "rating": null,
      "bill": false,
      "complete": false,
      "laundry": false,
      "clean": false,
      "roomservice": false,
      "napkin": false,
      "waiter": false,
      "water": false,
      "name": "fgg",
      "created": "2016-11-24T09:43:28.413Z",
      "isCurrentUserOwner": true
  }
});

/* Put your css in here */

body {
    font-size: 14px;
}

table
{
    border-collapse:collapse;
}
table, td, th
{
    border:1px solid black;
}
td{
    padding: 2px;
}
.servicetaxinclusivetrue:before{
  color: green!important;
  content: "\f00c";
}
.servicetaxinclusivefalse:before{
  color: red!important;
  content: "\f00d";
}
.servicetaxexclusivetrue:before{
  color: green!important;
  content: "\f00c";
}
.servicetaxexclusivefalse:before{
  color: red!important;
  content: "\f00d";
}

<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>    
</head>
<body ng-controller="MainCtrl">
    <table ng-table="tableParams" class="table table-bordered ">
        <thead>
            <tr>
                <th rowspan="2">s.no</th>
                <th rowspan="2"> sprice </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="ram in resultValue=(order.orderfood)  | filter: {confirm: '!cancelled'}">
                <td>{{$index + 1}}</td>
                <td>{{ram.sprice }}</td>
            </tr>
            <tr>
                <td>sum</td>
                <td>{{resultValue | sumOfValue:'sprice'}}</td>
            </tr>
    </table>
    <input type="text" ng-model="sprice_total" my-model-value="{{resultValue | sumOfValue:'sprice'}}">
</body>
</html>

希望这是你所期待的

使用AngularJs中的表达式更新/分配ng-model对象

1 个答案: