Question

嘿伙计，所以我有一个页面显示离子内的列表。

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

的购买按钮

该列表只列出使用ng-repeat“配方食谱”列出所有内容。

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

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

这一切都有意义吗？有没有更好的方法来拥有一些我没有手动编码每个按钮的项目，只需让按钮检查字典中项目的价格并增加它，如果可能更新跨度？

如果您需要进一步的信息，请询问，我希望我的问题很清楚。

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中调用一个函数来修改一个元素的数据。我有一个演示，原则上显示了你正在尝试做的事情。我希望这可以帮助您解决问题。

看看这个plunkr：

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;
  }
});

如何增加字典中的值

1 个答案: