如何增加字典中的值

Question

大家好，我有一个页面显示了 ionic 中的列表。

TLDR - 基本上我想要一个增加 {{recipe.quantity}}??

的购买按钮

该列表仅列出使用 ng-repeat "recipe in recipes" 将它们全部列出。

当我点击其中一个时，它会加载从字典中提取数据的详细信息页面

如何在详细信息页面上显示一个按钮，以增加该项目的数量并使该项目可由跨度调用？

这一切有意义吗？有没有更好的方法让我不必手动编码每个按钮的项目数量，只需让按钮检查字典中项目的价格并在可能的情况下增加它更新跨度？

如果您需要更多信息，请直接询问，我希望您清楚我在问什么。

http://jsfiddle.net/d8dc2opm/

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  // Each tab has its own nav history stack:
  .state('tab.main', {
    url: '/main',
    views: {
      'tab-main': {
        templateUrl: 'templates/tab-main.html',
        controller: 'mainCtrl'
      }
    }
  })



  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

  .state('tab.recipes', {
      url: '/recipes',
      views: {
        'tab-recipes': {
          templateUrl: 'templates/tab-recipes.html',
          controller: 'RecipesCtrl'
        }
      }
    })
    .state('tab.recipe-detail', {
      url: '/recipes/:recipeId',
      views: {
        'tab-recipes': {
          templateUrl: 'templates/recipe-detail.html',
          controller: 'RecipeDetailCtrl'
        }
      }
    })

  .state('tab.buildings', {
      url: '/buildings',
      views: {
        'tab-buildings': {
          templateUrl: 'templates/tab-buildings.html',
          controller: 'BuildingsCtrl'
        }
      }
    })
    .state('tab.building-detail', {
      url: '/building/:buildingId',
      views: {
        'tab-buildings': {
          templateUrl: 'templates/building-detail.html',
          controller: 'BuildingDetailCtrl'
        }
      }
    })

  .state('tab.upgrades', {
      url: '/upgrades',
      views: {
        'tab-upgrades': {
          templateUrl: 'templates/tab-upgrades.html',
          controller: 'UpgradesCtrl'
        }
      }
    })
    .state('tab.upgrade-detail', {
      url: '/upgrade/:upgradeId',
      views: {
        'tab-upgrades': {
          templateUrl: 'templates/upgrade-detail.html',
          controller: 'UpgradeDetailCtrl'
        }
      }
    })

  



  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/main');

});

var milk = localStorage.getItem("milk") ?  localStorage.getItem("milk") : 0.0;
var totalMilk = localStorage.getItem("totalMilk") ? localStorage.getItem("totalMilk") : 0.0;
var milkRate = localStorage.getItem("milkRate") ?  localStorage.getItem("milkRate") : 1.0;

var cash = localStorage.getItem("cash") ? localStorage.getItem("cash") : 0.0;
var totalCash = localStorage.getItem("totalCash") ? localStorage.getItem("totalCash") : 0.0;

var butter = localStorage.getItem("butter") ?  localStorage.getItem("butter") : 0.0;




function prettify(input){
    var output = Math.round(input * 1000000)/1000000;
  return output;
}


$("#milkButton").click(function(e) {

    
    milk += milkRate;
    totalMilk += milkRate;
    document.getElementById("milk").innerHTML = prettify(milk);
    document.getElementById("totalMilk").innerHTML = prettify(totalMilk);

     

});










angular.module('starter.services', [])

.factory('Recipes', function() {
  // Might use a resource here that returns a JSON array

  // Some fake testing data
  var recipes = [{

    name: 'MilkShake',
    quantity: 0,
    sellPrice: 1.5,
    milkCost: 2,
    id: 0,
    face:''

  }, {
    
    name: 'Butter',
    quantity: 0,
    sellPrice: 1.5,
    milkCost: 2,
    id: 1,
    face:''
  }, {

    name: 'Cream',
    quantity: 0,
    sellPrice: 2,
    milkCost: 2,
    id: 2,
    face:''
  }, {
    name: 'Ice Cream',
    quantity: 0,
    sellPrice: 4.5,
    milkCost: 2,
    id: 3,
    face:''
  }, {
    name: 'Cake',
    quantity: 0,
    sellPrice: 5,
    milkCost: 2.5,
    id: 4,
    face:''
    
  }];

  return {
    all: function() {
      return recipes;
    },
    remove: function(recipe) {
      recipes.splice(recipes.indexOf(recipe), 1);
    },
    get: function(recipeId) {
      for (var i = 0; i < recipes.length; i++) {
        if (recipes[i].id === parseInt(recipeId)) {
          return recipes[i];
        }
      }
      return null;
    }
  }
})

<ion-view view-title="{{recipe.name}}">
  <ion-content class="padding">
    <img ng-src="{{recipe.face}}" style="width: 64px; height: 64px">
    <h2>{{recipe.name}}</h2>
    <p>You Have {{recipe.quantity}}</p>
    <p>Takes {{recipe.milkCost}} Milk</p>
    <p>Sells for ${{recipe.sellPrice}} Each</p>
    <button id = "recipeButton">Buy</button>
  </ion-content>
</ion-view>

Answer 1

所以你要做的是在 ng-repeat 中调用一个函数来修改一个元素的数据。我有一个演示，原则上可以显示您要执行的操作。希望能帮到您解决问题。

看看这个插件：

http://plnkr.co/edit/cfNGnx5eNXTuirCduWaG?p=preview

模板：

  <body ng-app="plunker" ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <div ng-repeat="elem in data">
        {{elem.id}} {{elem.count}}
        <button ng-click="increment($index)">increment {{elem.id}}</button>
    </div>

  </body>

这是控制器

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.data = [
    {id: 'a', count: 0},
    {id: 'b', count: 0},
    {id: 'c', count: 0}
  ]
  $scope.increment = function(at) {
    $scope.data[at].count += 1;
  }
});

如何增加字典中的值

How to increase a value inside a dictionary

javascript

angularjs

dictionary