AngularJS输入推送到控制器

时间:2015-12-07 11:55:47

标签: angularjs ionic

我一直在忙着尝试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>

它还没有工作,我现在做错了什么? :(

2 个答案:

答案 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")