Update/Assign ng-model object with expression in AngularJs

Question

I am using MEAN stack in my application with AngularJS as my front-end. How to ng-bind the totalsum of value into another input in Agularjs , Actually we have a table and we have used filter to get the totalsum value for Sprice, then we also got sprice totalsum value like 250, then what we exactly expecting is we need to bind this totalsum value into another ng-module input.... for example:- sprice totalsum value is 250, expecting answer of ng-bind value is totalsum value like 250 ...My Plunker. we don't know where we have done the mistake so please look into plunker and help us..

• we have a table, in the table we have used filter functionality to get the totalsum value for sprice,we got the answer like 250 using of this <td>{{resultValue | sumOfValue:'sprice'}}</td>.

• what we expecting we need to bind the sprice totalsum value to another ng-module like sprice_total input..expecting answer 250...

• I have given the plunker as reference plunker please any one knows the solution help us.

My controller:- sprice totalsum filter:-

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

I have tried to use the ng-bind to get the value to another input like :-

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

• please update the plunker as well to know the solution... thanks..

Answer 1

Had created myModelValue directive that will assign your expression to ng-model object

Following is reference 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>

Hope this is what you where expecting