AngularJS 输入推送到控制器

Question

我一直在忙于尝试 AngularJS，但遇到了一个小问题。我将在下面显示我的 App.js 和我的 Index.html。

索引.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 列表中提交新条目。 所以很自然，这些输入将由 "inkomsten" 或 "uitgaven" 组成。在这些之间进行选择后，用户可以填写新输入的名称，然后填写绑定到它的值。现在，我不确定如何将信息传递给 app.js！

希望你能理解我的问题。

提前致谢

---

13:20 07-12-2015

经过帮助，现在看起来像这样

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>

它还不起作用，我现在做错了什么？ :(

Answer 1

您可以轻松地使用$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 {
      //...
   }
}

Answer 2

addToNgRepeat("addToNgRepeat("uitgaven")")"

应该是……

addToNgRepeat("uitgaven")