我一直在忙着尝试AngularJS并遇到了一个小问题。我将在下面显示我的App.js和我的Index.html。
的index.html
<ion-tab title="Home">
<ion-header-bar class="bar-dark">
<h1 class="title">Overzicht</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="info in inkomsten">
{{info.name }} <p class="float-left">{{info.value}}</p>
</ion-item>
</ion-list>
<ion-list>
<ion-item ng-repeat="info in uitgiften">
{{info.name }} <p class="float-left">{{info.value}}</p>
</ion-item>
</ion-list>
<ion-list>
<ion-item ng-repeat="info in tabel">
{{info.name }} <p class="float-left">{{info.value}}</p>
</ion-item>
</ion-list>
<form novalidate>
<input ng-model="name">
<input ng-model="value">
<input type="submit" ng-click="submitForm(name,value)" value="Click me!">
</form>
</ion-content>
</ion-tab>
<ion-tab title="Toevoegen">
</ion-tab>
<ion-tab title="Settings">
</ion-tab>
</ion-tabs>
</body>
app.js
angular.module('todo', ['ionic'])
.controller('TodoCtrl', function($scope) {
$scope.inkomsten= [
{ name: 'Salaris',value:'500' },
{ name: 'Toeslag',value:'200' },
{ name: 'Inkomsten',value:'211' },
{ name: 'Weekend', value:'22' }
];
$scope.uitgiften= [
{ name: 'eten',value:'120'},
{ name: 'kat',value:'230'},
{ name: 'schildpad', value: '300'},
{ name: 'huur', value: '200'}
];
}
});
我希望我的Index.html上有2个按钮,用户可以选择在ng-repeat列表中提交新条目。 所以这些输入自然会由&#34; inkomsten&#34;或&#34; uitgaven&#34; 。在这些之间进行选择之后,用户可以填写新输入的名称,然后填充绑定到它的值。现在,我不知道如何将信息传递给app.js!
我希望你能理解我的问题。
提前致谢
2015年12月12日13:20
在帮助之后它现在看起来像这样
app.js
.controller('TodoCtrl', function($scope) {
$scope.inkomsten= [
{ name: 'Salaris',value:'500' },
{ name: 'Toeslag',value:'200' },
{ name: 'Inkomsten',value:'211' },
{ name: 'Weekend', value:'22' }
];
$scope.uitgiften= [
{ name: 'eten',value:'120'},
{ name: 'kat',value:'230'},
{ name: 'schildpad', value: '300'},
{ name: 'huur', value: '200'}
];
$scope.addToNgRepeat = function(data) {
if(data === "uitgaven"){
$scope.uitgiften.push({name: $scope.name,value: $scope.value});
} else {
$scope.inkomsten.push({name: $scope.name,value: $scope.value});
}
}
});
的index.html
<form novalidate>
<input ng-model="name">
<input ng-model="value">
<input type="button" ng-click="addToNgRepeat("addToNgRepeat("uitgaven")")" value="uitgaven">
<input type="button" ng-click="addToNgRepeat("addToNgRepeat("inkomsten")")" value="inkomsten">
</form>
它还没有工作,我现在做错了什么? :(
答案 0 :(得分:0)
您可以轻松使用$scope.name
和$scope.value
来访问这些输入,因为ng-model
已将其值绑定到您的范围。
你需要2个按钮共享相同的点击功能和不同的参数,以指示点击了哪个按钮,如:
<button ng-click="todofunc(1)" >
<button ng-click="todofunc(2)" >
$scope.todofunc = function(index) {
if (index === 1) {
$scope.inkomsten.push({
name: $scope.name,
value: $scope.value,
})
} else {
//...
}
}
答案 1 :(得分:0)
addToNgRepeat("addToNgRepeat("uitgaven")")"
应该是......
addToNgRepeat("uitgaven")