如何將表單保存到數組中並在angularjs中顯示它們

-1

嗨，首先我的英語不好。即時通訊完全新在angularjs我想做一個窗體，然後將表單保存到一個數組，並在我的HTML顯示數組。我的問題是如何在數組中保存表單並始終保持它們，然後顯示它們？如何將表單保存到數組中並在angularjs中顯示它們

這裏是我的jsfidle：http://jsfiddle.net/Lvc0u55v/12098/ 這裏我的js代碼：

var app = angular.module("myApp", ["ngRoute"]); 
 
app.config(function($routeProvider) { 
 
    $routeProvider 
 
    .when("/", { 
 
     templateUrl : "main.htm", 
 
    }) 
 
    .when("/new", { 
 
     templateUrl : "new.html", 
 
     controller : "newController" 
 
    }) 
 
    .when("/view", { 
 
     templateUrl : "view.html", 
 
     controller : "viewController" 
 
    }); 
 
}); 
 
app.controller("newController", ['myfactory', 
 

 
function ($scope,myfactory) { 
 
    $scope.master = {}; 
 

 
    $scope.update = function(user) { 
 
     $scope.master = angular.copy(user); 
 
    }; 
 

 
    $scope.reset = function(form) { 
 
    if (form) { 
 
     form.$setPristine(); 
 
     form.$setUntouched(); 
 
    } 
 
    $scope.user = angular.copy($scope.master); 
 
    }; 
 
    
 
    $scope.alluser = [{ 
 
    name: "", 
 
    family: "", 
 
    code: "", 
 
    birth: "", 
 
    father: "", 
 
    explain: "" 
 
    }]; 
 
    $scope.addItem = function(user) { 
 
     $scope.alluser.name.push(user.name); 
 
     $scope.alluser.family.push(user.family); 
 
     $scope.alluser.code.push(user.code); 
 
     $scope.alluser.birth.push(user.birth); 
 
     $scope.alluser.father.push(user.father); 
 
     $scope.alluser.explain.push(user.explain); 
 
    }; 
 

 

 
}]); 
 
app.controller("viewController", function ($scope) { 
 
    $scope.msg = "I love Paris"; 
 
}); 
 

 
app.factory('myfactory', function() { 
 
    return { 
 
     array: function() { 
 
      return $scope.alluser; 
 
     } 
 
    }; 
 
});

，這是我的HTML表單和我的index.html：

<br /><br /> 
 
<div ng-app="myApp" ng-controller="newController"> 
 

 
<form> 
 
name : <input type="text" ng-model="user.name" /><br /> 
 
family : <input type="text" ng-model="user.family" /><br /> 
 
code melli : <input type="text" ng-model="user.code" /><br /> 
 
birth: <input type="text" ng-model="user.birth" /><br /> 
 
father: <input type="text" ng-model="user.father" /><br /> 
 
explain : <input type="text" ng-model="user.explain" /><br /> 
 
<input type="submit" ng-click="addItem(master)" value="Save" /> 
 

 

 
    <ul> 
 
     <li ng-show="user.name">{{user.name}}</li> 
 
     <li ng-show="user.family">{{user.family}}</li> 
 
     <li ng-show="user.code">{{user.code}}</li> 
 
     <li ng-show="user.birth">{{user.birth}}</li> 
 
     <li ng-show="user.father">{{user.father}}</li> 
 
     <li ng-show="user.explain">{{user.explain}}</li> 
 
    </ul> 
 
    <div ng-controller="newController"> 
 
    <ul> 
 
     <li ng-repeat="user in alluser"><a href="#">{{user.name}}</a></li> 
 
    </ul> 
 
</div> 
 

 

 
</form> 
 

 

 
</div>

來源

2016-11-17 james francos

有相當多的錯誤，我可以看到。你能爲你的問題創建一個小提琴嗎？這樣就很容易調試。 –

@AlexRumbaNicked jsfiddle添加了bro –

您看到bro，您已經聲明瞭具有名稱的模板，但您尚未創建頁面。控制器的使用也是多餘的，還有更多。我會嘗試在[plunker]中複製它（http://plnkr.co/）。但是，對於我來說，這對我來說太過分了15分：/ –

您已經定義的路由，但沒有出現在你的提琴模板。你還沒有宣佈整個應用程序。此外，你還沒有注入範圍。我已經刪除了不需要的組件，併爲您創建了一個重要的工具。

PLUNKER：Code Revision

HTML：

<html ng-app="myApp"> 

    <head> 
    <script data-require="[email protected]" data-semver="1.3.0-beta.16" src="https://code.angularjs.org/1.3.0-beta.16/angular.min.js"></script> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    </head> 
<body ng-controller="newController"> 

<form method="POST" name="user"> 
name : <input type="text" ng-model="user.name" /><br /> 
family : <input type="text" ng-model="user.family" /><br /> 
code melli : <input type="text" ng-model="user.code" /><br /> 
birth: <input type="text" ng-model="user.birth" /><br /> 
father: <input type="text" ng-model="user.father" /><br /> 
explain : <input type="text" ng-model="user.explain" /><br /> 
<input type="submit" ng-click="addItem(user)" value="Save" /> 

    <ul> 
     <li ng-show="user.name">{{user.name}}</li> 
     <li ng-show="user.family">{{user.family}}</li> 
     <li ng-show="user.code">{{user.code}}</li> 
     <li ng-show="user.birth">{{user.birth}}</li> 
     <li ng-show="user.father">{{user.father}}</li> 
     <li ng-show="user.explain">{{user.explain}}</li> 
    </ul> 
    <div > 

     <p ng-repeat="x in alluser"> {{ x }} </p> 

    </div> 
</form> 

</body> 
</html>

JS：

var app = angular.module("myApp", []); 
app.controller("newController", ['$scope','myfactory', 
function ($scope,myfactory) { 
    $scope.master = {}; 

    $scope.update = function(user) { 
     $scope.master = angular.copy(user); 
    }; 

    $scope.reset = function(form) { 
    if (form) { 
     form.$setPristine(); 
     form.$setUntouched(); 
    } 
    $scope.user = angular.copy($scope.master); 
    }; 

    $scope.alluser = [{ 
    name: "", 
    family: "", 
    code: "", 
    birth: "", 
    father: "", 
    explain: "" 
    }]; 
    $scope.addItem = function(user) { 
     $scope.alluser.push(user); 
    }; 


}]); 

app.factory('myfactory', function() { 
    return { 
     array: function() { 
      return $scope.alluser; 
     } 
    }; 
});

來源

2016-11-17 10:25:38

tnx老兄它非常有幫助：X –

在DIV卸下納克控制器，

<div> 
    <ul> 
     <li ng-repeat="user in alluser"><a href="#">{{user.name}}</a></li> 
    </ul> 
</div>

來源

2016-11-17 07:12:23 Sajeetharan

tnx但沒有變化 –

爲什麼downvote here？ – Sajeetharan

更新的addItem函數像的下方。

$scope.addItem = function(user) { 
    $scope.alluser.push(user); 
};

從第二格移除ng控制器。

<div> 
    <ul> 
     <li ng-repeat="user in alluser"><a href="#">{{user.name}}</a></li> 
    </ul> 
</div>

來源

2016-11-17 07:15:41

如何將表單保存到數組中並在angularjs中顯示它們

回答

相關問題