簡體   English   中英

angular-js無法保存更改

[英]angular-js can't save changes

具有管理界面-可以添加\\刪除\\編輯用戶。 這是html的一部分,沒什么重要,但是可以肯定的是(我的索引文件中包含ng-controller和ng-app)。

<div class="row" ng-repeat="user in users">
            <form name="myForm2">
                <div class="col-md-1 cell">
                    <span ng-show="!editMode">{{user.username}}</span>
                    <input ng-show="editMode" type="text" name="username" ng-model="current.username" required >
                </div>
                <div class="col-md-1 cell">
                    <span ng-show="!editMode">{{user.firstname}}</span>
                    <input ng-show="editMode" type="text" name="firstname" ng-model="current.firstname" required>
                </div>
                <div class="col-md-1 cell">
                    <span ng-show="!editMode">{{user.lastname}}</span>
                    <input ng-show="editMode" type="text" name="lastname" ng-model="current.lastname" required>
                </div>
                <div class="col-md-1 cell">
                    <span ng-show="!editMode">{{user.age}}</span>
                    <input ng-show="editMode" type="number" name="age" ng-model="current.age" required>
                </div>
                <div class="col-md-2 cell">
                    <span ng-show="!editMode">{{user.email}}</span>
                    <input ng-show="editMode" type="email" name="email" ng-model="current.email" required>
                </div>
            </form>
            <div class="col-md-3 cell">
                <button type="button" class="btn btn-warning" ng-show="!button1" ng-click="edit(user); userEddit = !userEddit; button1 = !button1; editMode = !editMode">Eddit</button>
                <span ng-show="userEddit">
                    <h6>Save changes?<br>
                        <button type="submit" class="btn btn-success btn-xs col-md-offset-1" ng-click="save(user); userEddit = !userEddit; button1 = !button1; editMode = !editMode" ng-disabled="myForm2.$invalid">Save</button>
                        <button type="button" class="btn btn-danger btn-xs col-md-offset-1" ng-click="cancel(user); userEddit = !userEddit; button1 = !button1; editMode = !editMode">Cancel</button>
                    </h6>   
                </span>
            </div>
            <div class="col-md-3 cell">
                <button type="button" class="btn btn-danger" ng-show="!button" ng-click="userDelete = !userDelete; button = !button">Del</button>
                <span ng-show="userDelete">
                    <h6>Sure?
                        <button type="submit" class="btn btn-success btn-xs col-md-offset-1" ng-click="removeRow(user.username)">Del</button>
                        <button type="button" class="btn btn-danger btn-xs col-md-offset-1" ng-click="userDelete = !userDelete; button = !button">Cancel</button>
                    </h6>   
                </span>
            </div>
        </div>

有controllers.js

'use strict';
var App = angular.module('App', []);
App.controller('ListCtrl', function($scope) {
    $scope.users = [
    {"username":"user1","firstname":"John","lastname":"Anderson","age":25,"email":"john.anderson@testtask.com"},
    {"username":"user2","firstname":"Paul","lastname":"Winfred","age":27,"email":"winfredMPaul@dayrep.com"},
    {"username":"user3","firstname":"Adan","lastname":"Kelley","age":64,"email":"adanMKelley@jourrapide.com"},
    {"username":"user4","firstname":"Vernon","lastname":"McCall","age":70,"email":"vernonKMcCall@teleworm.us"},
    {"username":"user5","firstname":"Ernest","lastname":"Heflin","age":38,"email":"ernestMHeflin@jourrapide.com"},
    {"username":"user6","firstname":"John","lastname":"Barton","age":52,"email":"JohnPBarton@jourrapide.com"},
    {"username":"user7","firstname":"Jessica","lastname":"Lara","age":25,"email":"JessicaRLara@jourrapide.com"}
    ];

$scope.removeRow = function(username){              
    var index = -1;     
    var comArr = eval( $scope.users );
    for( var i = 0; i < comArr.length; i++ ) {
        if( comArr[i].username === username ) {
            index = i;
            break;
        }
    }
    if( index === -1 ) {
        alert( "Something gone wrong" );
    }
    $scope.users.splice( index, 1 );        
};  

$scope.current = {};
$scope.copy = {};

$scope.edit = function(user){
    $scope.copy = angular.copy(user);
    $scope.current = angular.copy(user);    
};

$scope.save = function(user){
    user = $scope.current;
    $scope.current = {};
    $scope.copy = {};
};

$scope.cancel = function(user) {
    user = $scope.copy;
    $scope.current = {};
    $scope.copy = {};
};
});

我的問題-我無法保存更改。 但是如果我那樣做

$scope.edit = function(user){
        $scope.copy = angular.copy(user);
        $scope.current = angular.copy(user);    
    };

    $scope.save = function(user){
        $scope.users[0] = $scope.current;
        $scope.current = {};
        $scope.copy = {};
    };

    $scope.cancel = function(user) {
        $scope.users[0] = $scope.copy;
        $scope.current = {};
        $scope.copy = {};
    }; 

它僅適用於第一個。

user = $scope.current;

這就是問題。 我認為您的所有方法都有問題,例如,可以使用以下方法進行保存:

$scope.users.push(user);

這會將您的用戶添加到users數組。

找到的答案:只需為我的數據庫添加ID

    for (var i = 0; i < $scope.users.length; i++) {
    $scope.users[i].id = i;
    }

然后按周期檢查比賽

$scope.edit = function(user){
    $scope.copy = angular.copy(user);
    $scope.current = angular.copy(user);    
};

$scope.save = function(user){
    for (var i = 0; i < $scope.users.length; i++) {
        if ($scope.users[i].id === $scope.current.id){
            $scope.users[i]=$scope.current;
        }
    }
    $scope.current = {};
    $scope.copy = {};
};

$scope.cancel = function(user) {
    for (var i = 0; i < $scope.users.length; i++) {
        if ($scope.users[i].id === $scope.copy.id){
            $scope.users[i]=$scope.copy;
        }
    }
    $scope.current = {};
    $scope.copy = {};
};

不管怎么說,還是要謝謝你

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM