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

我在我的应用程序中使用 MEAN 堆栈，并将 AngularJS 作为我的前端。如何ng-bind totalsum值(value)转化为另一个input在 Agularjs 中，实际上我们有一个表，我们使用过滤器来获取 Sprice 的总和值，那么我们也得到了sprice总和值，如 250 ，那么我们真正期待的是我们需要 bind这个totalsum值(value)转化为另一个ng-module输入.... 例如:- sprice totalsum值为 250 , 期待 ng-bind 的回答值为 totalsum value喜欢250 ... My Plunker .我们不知道我们在哪里犯了错误所以请调查 plunker 并帮助我们..

我们有一个表，在表中我们使用过滤器功能来获取 sprice 的总和值，我们使用这个 <td>{{resultValue | sumOfValue:'sprice'}}</td> 得到了 250 个答案.
我们期望我们需要什么 bind sprice totalsum 值到另一个ng-module喜欢sprice_total输入..期待答案250 ...
我已将 plunker 作为引用 plunker请任何知道解决方案的人帮助我们。

我的 Controller :- 价格总和过滤器:-

    .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);
}

})

我的 Html:-

   <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>

我尝试使用 ng-bind 将值获取到另一个输入，例如:-

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

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

最佳答案

已创建 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>

希望这就是你所期待的

关于html - 使用 AngularJs 中的表达式更新/分配 ng-model 对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41033072/

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

上一篇：html - 响应式菜单问题

下一篇：jquery - Internet Explorer 中未显示 WordPress 插件内容