пользовательские функции в AngularJS службе

Question

Так что я пытаюсь вычислить цену со скидкой, нанесенную на деталь/продуктах, основанных от двух переменных: Розничной Цены и продажной цена. Я создал функцию внутри моей службы AngularJS, называемую calculateDiscount, и я хотел бы вернуть вычисленное значение на моем представлении. Моя проблема заключается в том, что моя точка зрения не обновляется с calculated discount percentage для каждого элемента

Ниже мой код

HTML Markup:

<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" 
      } 
     ] 
    } 
] 

DataService

(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

Я думаю, вы получите детали в методе что-то какой-то контроллер, как это:

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}}%. Я не проверял этот код на работу, могут быть некоторые синтаксические ошибки, но он отражает концепцию

Answer 2

Попробуйте добавить функцию calculateDiscount к dataItems объекта, как и другие функции, так он будет возвращен.

dataItems.calculateDiscount = function(item){ 
    return ((item.saleprice/item.price)*100); 
} 

Answer 3

Наталья Камаева помогла мне разобраться в комнате чата.

Одна ошибка, которую я сделал, и, возможно, это тот, который стоил мне целый день, просто дело с отладкой, является то, что в моем Data.json файл содержал $ знак для saleprice и price атрибуты объекта моего элемента. Поэтому, когда я пытался использовать return (item.saleprice/item.price)*100, я всегда получал значение NAN.

Когда-то Наталия помогла мне разобраться в этом чате, мне пришло в голову множество реализаций. И я хотел бы разделить два из них:

1. Простое решение (не всегда рекомендуется, но работает в некоторых случаях)

<div class="articleItem swiper-slide" ng-repeat="item in items | orderBy:'-likes'"> 
    <div class="sales-discount"> 
      <i class="icon-tag"></i>Save {{(item.saleprice/item.price)*100}}% 
    </div> 
</div> 

Это решение работает, если расчетная скидка фиксированная функция которые не будут изменены в ближайшем будущем. Но с точки зрения производства/бизнеса, имеет смысл хранить эту переменную где-то и иметь возможность манипулировать ею.

И это подводит меня ко второму решению

2.Наилучшее решение на мой взгляд (Спасибо за Наталью :))

Необходимо испечь функцию calculateDiscount в пределах DataService. Ниже приведена полная реализация. Я также немного очистил код, чтобы сосредоточиться только на важном аспекте.

HTML MARKUP

<div class="articleItem swiper-slide" ng-repeat="item in items | orderBy:'-likes'"> 
    <div class="sales-discount"> 
      <i class="icon-tag"></i>Save {{item.discount}}%</div> 
</div> 

SAMPLE DATA в 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" 

} 
] 

Обратите внимание, что здесь нет никакого атрибута для discount. Это будет введено в нашу службу, потому что это расчетное значение.

Service Data

(function (ng) { 
    'use strict'; 
angular.module('data.services', ['pinStyle']) 
    .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 
      }) 
       .then(function (response) { 
        var items = response.data; 
        items.forEach(function (item) { 
         item.discount = calculateDiscount(item); 
        }) 

       return items; 

       }); 
     }; 

     return dataItems; 

    }]); 

} (angular)); 

Контроллер Призвание

(function (ng) { 
'use strict'; 

angular.module('feed.controllers', ['pinStyle', 'data.services']) 
    .controller('feedController', ['$scope', 'dataService', function ($scope,dataService) { 
     console.log('feedController'); 


     var items; 
     var status; 
     getItems(); 

     function getItems() { 
      dataService.getAllItems() 
       .then(function (itm) { 
        $scope.items = itm; 
        console.log($scope.items); 
       }); 
     }; 
    }]); 
}(angular)); 

Результат моегоconsole.log($scope.items);

не лед как скидка переменная возвращается в пределах самого предмета

Это именно то, чего я хотел достичь.