javascript - AngularJS 服务中的自定义函数

Question

因此，我尝试根据两个变量计算应用于商品/产品的折扣价:零售价和销售价。我在 AngularJS 服务中创建了一个函数，名为 calculateDiscount ，我想返回我的 View 中的计算值。我的问题是我的 View 没有更新为 calculated discount percentage对于每个项目

下面是我的代码

HTML 标记:

<div class="articleItem swiper-slide" ng-repeat=
    "item in items | orderBy:'-likes'">
        <div class="sales-discount">
            <i class="icon-tag"></i> Save {{calculateDiscount(item)}}%
        </div>
        <div class="article-title">
            <span class="badge badge-rect-white">Bestseller</span>
            <span class="badge badge-rect-black">On sale</span>
            <h2 style=
            "font-family: 'Lato', Arial, Tahoma, sans-serif; font-size: 26px; margin: 0; line-height: 1.2; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8); font-weight:900;">
            <a href="javascript:;" style=
            "color:#fff;">{{item.productName}}</a>
            </h2>
            <div class="shop-data" style="margin-top:10px;">
                <!--<span class="shop-price" style="font-weight:900;
                                                            background-color: rgb(62, 123, 42);
                                                            padding: 5px;
                                                            border-radius: 3px;
                                                            color: #fff;">
                                   {{item.price}}
                                </span>-->
                 <span class="shop-price" style=
                "font-weight:900; background-color: rgb(62, 123, 42); padding: 5px; border-radius: 3px; color: #fff;">
                {{item.saleprice}}</span> <span class="data"><span style=
                "font-weight:900"><input id="box1" ng-model="item.likes"
                ng-value="item.likes" type="checkbox"> <label for="box1"
                style=
                "padding: 5px; background-color: #222; position: relative; top: 0; border-radius: 3px; margin-right:5px;">
                {{item.likes}}</label> <input id="box2" ng-model=
                "item.comments" ng-value="item.comment_count" type=
                "checkbox"> <label for="box2" style=
                "padding: 5px; background-color: #222; position: relative; top: 0; border-radius: 3px; margin-right:5px;">
                {{item.comment_count}}</label> <input id="box3" ng-model=
                "item.shares" ng-value="item.share_count" type="checkbox">
                <label for="box3" style=
                "padding: 5px; background-color: #222; position: relative; top: 0; border-radius: 3px; margin-right:5px;">
                {{item.share_count}}</label></span></span>
            </div>
        </div><img alt="" class="itemImgStyler" ng-src="{{item.picture}}"
        style="width:100%;">
    </div>

data.json 中的

示例数据

    [

    {
        "_id": "5702bdbce518778bbc5add77",
        "index": 1,
        "guid": "694aafa9-b641-478a-a258-c2f0989f20dc",
        "isOnsale": true,
        "price": "$439.53",
        "saleprice": "$22.73",
        "picture": "https://s-media-cache-ak0.pinimg.com/564x/d7/24/f2/d724f20fb401e010d601842584b5419f.jpg",
        "review": 4,
        "size": "L",
        "brand": "GUESS",
        "productType": "BEAUTY",
        "category": "SWEATERS",
        "productName": "Guess Men's Grey Sweater Two-Tones",
        "company": "LUXURIA",
        "phone": "+1 (842) 527-3928",
        "address": "674 Autumn Avenue, Haena, Massachusetts, 471",
        "likes": 34,
        "comment_count": 6,
        "share_count":20,
        "description": "Eu exercitation labore sint laborum nisi consequat pariatur sunt. Ullamco sit dolor velit ea excepteur cupidatat amet id Lorem anim enim consectetur ipsum eu. Laboris Lorem id exercitation occaecat irure aliquip veniam in ut. Esse velit occaecat cillum fugiat mollit ullamco do non cupidatat nulla ea esse aliquip cupidatat. Consectetur duis laborum fugiat laboris. Adipisicing fugiat dolor velit incididunt. Fugiat nisi dolor consequat amet et sint et aliquip qui consectetur.",
        "comments": "Non et elit ullamco est officia in. Velit ut nisi sunt mollit. Adipisicing est amet ipsum anim. Sunt aliquip irure aliqua non labore ut nulla.\n\nIrure fugiat ullamco enim elit sunt exercitation nisi. Ex consequat amet velit do ea veniam Lorem anim ipsum dolore ipsum aliqua culpa irure. Mollit irure aliquip ad elit ut consectetur proident amet et veniam nulla deserunt cupidatat culpa. Do duis sit elit voluptate fugiat anim ad id irure. Deserunt amet veniam nisi non.",
        "registered": "Sunday, November 2, 2014 12:41 PM",
        "latitude": "-6.226487",
        "longitude": "-111.623657",
        "tags": [
            7,
            "consequat qui"
        ],
        "range": [
            0,
            1,
            2,
            3,
            4,
            5,
            6,
            7,
            8,
            9
        ],
        "friends": [
            3,
            {
                "id": 1,
                "name": "Webb Rodriguez"
            }
        ]
    },
    {
        "_id": "5702bdbc1406dffa4188cc24",
        "index": 2,
        "guid": "27c7292b-a6a7-4145-afba-def743043941",
        "isOnsale": true,
        "price": "$422.14",
        "saleprice": "$95.89",
        "picture": "https://s-media-cache-ak0.pinimg.com/564x/b0/4c/35/b04c353ddf167ad87b19fab56aa16ac3.jpg",
        "review": 3,
        "size": "XXL",
        "brand": "NIKE",
        "productType": "SNEAKERS",
        "category": "SHOES",
        "productName": "NIKE Men's Shoes Two-Tones",
        "company": "ZENTILITY",
        "phone": "+1 (827) 471-2811",
        "address": "650 Clifton Place, Keyport, Pennsylvania, 9913",
        "likes": 458,
        "comment_count": 149,
        "share_count":82,
        "description": "Cillum consectetur ut cupidatat officia ex elit aliqua. Quis nisi officia deserunt sit cillum commodo consectetur pariatur eu voluptate mollit qui magna. Culpa sunt qui nulla sit esse fugiat fugiat deserunt culpa.",
        "comments": "Mollit commodo dolore sit nulla. Ea excepteur cillum in ullamco. Laborum ea laboris voluptate anim laboris elit consectetur elit cillum.\n\nLabore esse laboris occaecat laboris. Velit exercitation in qui exercitation aliqua in qui. Consectetur reprehenderit culpa culpa exercitation commodo cupidatat consequat laborum reprehenderit non aliqua voluptate labore id. Deserunt dolor voluptate aliquip aliqua elit nulla id veniam laborum veniam aute magna minim. Ut non eiusmod qui cupidatat elit. Pariatur laboris duis ea qui in minim sit. Ut nostrud ex deserunt proident.",
        "registered": "Sunday, June 22, 2014 12:32 AM",
        "latitude": "-52.134773",
        "longitude": "77.284837",
        "tags": [
            7,
            "consequat qui"
        ],
        "range": [
            0,
            1,
            2,
            3,
            4,
            5,
            6,
            7,
            8,
            9
        ],
        "friends": [
            3,
            {
                "id": 1,
                "name": "Webb Rodriguez"
            }
        ]
    }
]

数据服务

    (function (ng) {
    'use strict';

    angular.module('data.services', [ ])
        .factory('dataService', ['$http', function($http) {
            console.log('dataService');

            var urlBase = "main-services/data.json";
            var calculateDiscount;
            var dataItems = {};

            dataItems.getAllItems = function () {
                return $http.get(urlBase,{
                    cache:true
                });

            };

            dataItems.addNewItem = function (item) {
                return $http.post(urlBase+'/addNewItem', item);
            };
            calculateDiscount = function(item){
                return ((item.saleprice/item.price)*100);
            }

            return dataItems;


        }]);


}(angular));

Answer 1

我认为，您可以在某些 Controller 的方法中获得如下所示的项目:

dataService.getAllItems()
    .then(function(response){$scope.items = response.data;})

如果是这样，您可以像这样更改 getAllItems 方法:

dataItems.getAllItems = function () {
   return $http.get(urlBase,{
                cache:true
            })
         .then(function(response){
               var items = response.data;
               items.forEach(function(item){
                   item.discount = calculateDiscount(item);
                })
               return items;
          });
    };

然后，在您的 html 中，替换 <i class="icon-tag"></i> Save {{calculateDiscount(item)}}%与 <i class="icon-tag"></i> Save {{item.discount}}% 。我没有检查这段代码的工作情况，可能存在一些语法错误，但它反射(reflect)了概念