Блог

Главная - Вопросы по программированию - AngularJS, выталкивающий пустой элемент

AngularJS, выталкивающий пустой элемент

#angularjs

#angularjs

Вопрос:

Я совсем новичок в angular. Что меня смущает, так это то, что следующий код показывает пустые кнопки (редактировать / удалять), даже если он выглядит пустым (при запуске) : 

 <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="todoCtrl">

<h2>todo</h2>

<form ng-submit="todoAdd(item)">
    <input type="text" ng-model="todoInput" size="50" placeholder="Add New">
    <input type="submit" value="Add New">
</form>

<br>

<div ng-repeat="x in todoList">
   <span ng-bind="x.todoText"></span><button id="#edit" ng-click="edit(item)">edit</button><button ng-click="remove(item)">delete</button>
</div>

<script>
var app = angular.module('myApp', []); 
app.controller('todoCtrl', function($scope) {
    $scope.todoList = [{}];

    $scope.todoAdd = function(item) {
        $scope.todoList.push({todoText:$scope.todoInput);
        $scope.todoInput = "";
    };

    $scope.remove = function(item) {
        var index = $scope.todoList.indexOf(item);
        $scope.todoList.splice(index, 1);
    };
    $scope.edit = function(item) {
        //function
    };
});
</script>

</body>
</html>

А также может ли кто-нибудь помочь мне после нажатия на редактировать, чтобы ввести todoText для ввода и изменить заголовок addnew для сохранения? и после этого измените его на AddNew снова?

Большое вам спасибо

Комментарии:

1. Вы запрашиваете Angular2 или AngularJS? Это похоже на код AngularJS, но вы использовали тег angularjs и написали Angular2 в своем вопросе…

Ответ №1:

Заменить строку

 $scope.todoList = [{}];

Для 

 $scope.todoList = [];

Тогда он не покажет вам пустую строку.

 //Full code.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="todoCtrl">

<h2>todo</h2>

<form>
    <input type="text" ng-model="todoInput" size="50" placeholder="Add New">
    <input type="button" value="{{actionName}}" ng-click="todoAdd()" />
</form>

<br>

<div ng-repeat="x in todoList">
   <span>{{x.todoText}}</span><button id="#edit" ng-click="edit(x)">edit</button><button ng-click="remove(item)">delete</button>
</div>

<script>
var app = angular.module('myApp', []); 
app.controller('todoCtrl', function($scope) {
    $scope.todoList = [];
    $scope.actionName = 'Add';

    $scope.todoAdd = function() {
     if($scope.actionName === 'Add'){
        $scope.todoList.push({todoText:$scope.todoInput});
        $scope.todoInput = "";
     } else {
        var index = $scope.todoList.indexOf($scope.temp);
        console.log('index: '   index);
        $scope.todoList.splice(index, 1, {todoText:$scope.todoInput});
        $scope.actionName = 'Add';
     }
    };

    $scope.remove = function(item) {
        var index = $scope.todoList.indexOf(item);
        $scope.todoList.splice(index, 1);
    };
    $scope.edit = function(item) {
        $scope.todoInput=item.todoText;
        $scope.temp = item;
        $scope.actionName = 'Save';
    };
});
</script>

</body>
</html>

Комментарии:

1. вау. отлично. и что насчет этого редактирования? Можете ли вы дать мне подсказку, пожалуйста?

2. Просто чтобы изменить содержимое «ЗАДАЧИ TODO»

3. ОК. Я попробую.

4. Не могли бы вы, пожалуйста, создать jsfiddle этого?

5. это то, что я хотел? 🙂 и как после этого сделать отредактированный ввод пустым? 🙂