嗨，大家好，我有一个页面可以显示ionic里面的列表。
TLDR-基本上，我希望购买按钮可以增加{{recipe.quantity}}？
该列表仅列出使用ng-repeat“食谱中的食谱”将其全部列出。
当我单击它时，它会加载详细信息页面，该页面将从字典中提取数据
如何使按钮出现在详细信息页面上，以增加该项目的数量并使该项目可以跨度调用？
这一切有意义吗？有没有一种更好的方法可以让我不必手动编码每个按钮的项目数量，只需让按钮检查字典中项目的价格并在可能的情况下增加跨度就可以增加它的价格？
如果您需要更多信息，请问，我希望我已经清楚了。
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>因此，您要尝试执行的操作是在ng-repeat中调用一个函数来修改一个元素的数据。我有一个演示，从原理上显示了您正在尝试做的事情。我希望这可以帮助您解决问题。
看看这个punkr：
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;
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句