Question

我很有角度。我最奇怪的是，以下代码显示空按钮（编辑/删除），即使它看起来是空的（在开始时）：

<!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？

非常感谢

Answer 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>

AngularJS，推空元素

1 个答案: