2016-11-17 6 views
-1

こんにちは。imは全く新しい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>

+0

私が見ることができるエラーのかなりがあります。あなたはあなたの質問のためにフィドルのプランカを作成できますか?そうすれば、デバッグが容易になります。 –

+0

@AlexRumbaNicked jsfiddleさんがブローを追加しました –

+0

あなたはbroを見ましたが、あなたはその名前のテンプレートを宣言しましたが、あなたはそのページを作っていません。コントローラーの使用も冗長化されています。私は[プランカ](http://plnkr.co/)でそれを複製しようとします。しかし、それは15点のための私のためにあまりにも多くの仕事です:/ –

答えて

0

あなたは経路を定義しましたが、あなたのフィドルにテンプレートはありませんでした。あなたはアプリ全体を宣言していませんでした。さらに、スコープも注入していません。私は不要なコンポーネントを削除して、あなたのためのプランナーを作成しました。

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; 
     } 
    }; 
}); 
+0

tnxさんの非常に役に立ちました:X –

0

、以下のような

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

tnxしかし何も変わっていない –

+0

なぜここにdownvote? – Sajeetharan

1

更新のaddItem機能をDIVにNG-コントローラを取り外します。

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

ng-controllerを2番目のdivから削除します。

<div> 
    <ul> 
     <li ng-repeat="user in alluser"><a href="#">{{user.name}}</a></li> 
    </ul> 
</div> 
関連する問題