When click button, adding input to list


#1

Hi everyone, I’m newbie. I want to create a list, according to inputs.

15

I put my input and add button. However, I couldn’t add items into list according to inputs.

my html

<ion-view title="Bildirimler" id="page11">
  <ion-content padding="true" class="has-header">
<form>
	<div class="list">
		<label class="item item-input">
		<input type="text" placeholder="Notu giriniz.." ng-model="todo.name"></label>
	</div>
</form>
<div class="buttons"><button class="button" ng-click="addTodo()">ADD</button></div>
<ion-list show-delete= "data.showDelete">
  <ion-item ng-repeat="todo in todos">
  	{{todo.name}}
  </ion-item>
</ion-list>
  </ion-content>	
</ion-view>

my controller

.controller('bildirimlerCtrl', ['$scope', '$stateParams', '$ionicAuth', '$ionicUser', '$state', '$ionicModal', 
function ($scope, $stateParams) {
$scope.data = {
    showDelete: false
}
$scope.todos=[
{name: 'clean the kitchen'},
{name: 'clean the room'},
]
$scope.addTodo = function(){
    $scope.todos.push({name: ""})
}
}])

How can I do that? Thank you for help from now :slight_smile:


#2

Hi, not direclty helpful, but if you are new in this field: go to Ionic 2 and skip v1
Regards
Tom


#3

try this

<ion-view title="Bildirimler" id="page11">
<ion-content padding="true" class="has-header">
<form>
<div class="list">
	<label class="item item-input">
	<input type="text" placeholder="Notu giriniz.." ng-model="currentWork.name"></label>
</div>
</form>
<div class="buttons"><button class="button" ng-click="addTodo()">ADD</button></div>
<ion-list show-delete= "data.showDelete">
 <ion-item ng-repeat="todo in todos">
{{todo.name}}
 </ion-item>
</ion-list>
 </ion-content>	
   .controller('bildirimlerCtrl', ['$scope', '$stateParams', '$ionicAuth', '$ionicUser', '$state', '$ionicModal', 
 function ($scope, $stateParams) {
$scope.data = {
showDelete: false
}

 $scope.currentWork={
name:""
};

$scope.todos=[
{name: 'clean the kitchen'},
{name: 'clean the room'},
]
$scope.addTodo = function(){
$scope.todos.push($scope.currentWork);
 
 }
}])