Update/Assign 在 AngularJs 中具有表达式的 ng-model 对象
Update/Assign ng-model object with expression in AngularJs
我在我的应用程序中使用 MEAN 堆栈,AngularJS 作为我的前端。如何在 Agularjs 中将 ng-bind
值的 totalsum
转换为另一个 input
,实际上我们有一个 table 并且我们使用过滤器来获取 Sprice
的总和值,然后我们也得到了 sprice
总和值,如 250
,那么我们真正期望的是我们需要 bind
这个 totalsum
值到另一个 ng-module
输入.. .. 例如:- sprice totalsum
值是 250
,期望 ng-bind
值的答案是 totalsum value
就像 250
...My Plunker。我们不知道我们在哪里犯了错误,所以请查看 plunker 并帮助我们..
我们有一个 table,在 table 中,我们使用过滤器功能来获取 sprice
的总和值,我们使用 250 得到了答案<td>{{resultValue | sumOfValue:'sprice'}}</td>
.
我们期望我们需要 bind
sprice
总和值到另一个 ng-module
比如 sprice_total
输入..期待答案 250
...
我已经给了plunker作为参考plunker请知道解决方案的人帮助我们。
我的控制器:-
价格总和过滤器:-
.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>
希望这就是您所期待的
我在我的应用程序中使用 MEAN 堆栈,AngularJS 作为我的前端。如何在 Agularjs 中将 ng-bind
值的 totalsum
转换为另一个 input
,实际上我们有一个 table 并且我们使用过滤器来获取 Sprice
的总和值,然后我们也得到了 sprice
总和值,如 250
,那么我们真正期望的是我们需要 bind
这个 totalsum
值到另一个 ng-module
输入.. .. 例如:- sprice totalsum
值是 250
,期望 ng-bind
值的答案是 totalsum value
就像 250
...My Plunker。我们不知道我们在哪里犯了错误,所以请查看 plunker 并帮助我们..
我们有一个 table,在 table 中,我们使用过滤器功能来获取
sprice
的总和值,我们使用 250 得到了答案<td>{{resultValue | sumOfValue:'sprice'}}</td>
.我们期望我们需要
bind
sprice
总和值到另一个ng-module
比如sprice_total
输入..期待答案250
...我已经给了plunker作为参考plunker请知道解决方案的人帮助我们。
我的控制器:- 价格总和过滤器:-
.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>
希望这就是您所期待的