編集：
Maherの変更されたコードに基づいて、問題をもう一度説明しようと思います。私のHTMLページには、フォームが1つだけあります。フォーム内私は内にあるすべてのフィールド格納したい＃STEP1私にアカウントオブジェクトを。
<div id = " ＃step1 ">のHTMLを確認してください
そして、<div id = " ＃step2 ">内のフィールド
スタッフオブジェクトに保存したい。
だから、と問題がある、私は失う値の選択性別をアカウントやスタッフのオブジェクトから。すべてのフィールドはオブジェクトに正しくバインドされており、アクセス可能です。では＃のSTEP1性別ラジオは、自己にバインドされます。account.genderと＃step2では、性別ラジオが自分自身にバインドされています。staff.gender。しかし、アカウントで性別の値を取得しようとすると、未定義になりました。3つ以上のラジオボタンがある場合、その角度は性別の値を上書きするように見えます。
例。フォームに入力して[送信]をクリックすると、次のような結果が得られます。
アカウントオブジェクト：
スタッフオブジェクト：
しかし、私は得ます：
アカウントオブジェクト：
ラジオを正しくバインドするにはどうすればよいですか？ステップごとにユーザーの性別を取得し、その情報を他のオブジェクトに保存したいと思います。ここのようにアカウントとスタッフ。
var app = angular.module("app", []);
app.controller("WelcomeController", function ($scope, $filter) {
var self = this;
self.account = {};
self.staff = {};
self.bindForm = function() {
self.staff = self.staff;
self.account = self.account;
}
self.saveStep = function () {
console.log("staff", self.staff);
console.log("account", self.account");
}
});<!doctype html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="WelcomeController as self">
<div class="container">
<form name="MyForm" class="col-md-4">
<div id="step1" class="form-group">
<input class="form-control" ng-model="self.account.firstName" placeholder="firstName" ng-required="true" />
<input class="form-control" ng-model="self.account.lastName" placeholder="lastName" ng-required="true" />
<input class="form-control" ng-model="self.account.street" placeholder="streetName" ng-required="true" />
<label class="radio-inline">
<input name="i-account" type="radio" ng-model="self.account.gender" ng-value="1" ng-required="true">
<span class="fa fa-circle"></span> Male
</label>
<label class="radio-inline">
<input name="i-account" type="radio" ng-model="self.account.gender" ng-value="2" ng-required="true">
<span class="fa fa-circle"></span> Female
</label>
</div>
<div id="step2" class="form-group">
<input class="form-control" ng-model="self.staff.firstName" placeholder="firstName" />
<input class="form-control" ng-model="self.staff.lastName" placeholder="lastName" />
<label class="radio-inline">
<input name="i-staff" type="radio" ng-model="self.staff.gender" ng-value="1" ng-required="true">
<span class="fa fa-circle"></span> Male
</label>
<label class="radio-inline">
<input name="i-staff" type="radio" ng-model="self.staff.gender" ng-value="2" ng-required="true">
<span class="fa fa-circle"></span> Female
</label>
</div>
<button class="btn btn-success" ng-click="self.saveStep()">finish</button>
</form>
</div>
</body>
</html>こんにちは、私はこれがあなたが望むものであり、angularjsでng-modelをバインドおよび転送する方法を理解するのに役立つことを願っています。
プロジェクトで行ったように例を作成します。例を実行できます。最後の手順でブラウザコンソールを確認してください。
var app = angular.module("app", []);
app.controller("WelcomeController", function ($scope, $filter) {
var self = this;
self.account = {gender: 1};
self.staff = { gender: 2};
self.bindForm = function() {
self.staff = self.account;
}
self.saveStep = function () {
console.log("account", self.account.gender);
console.log("staff", self.staff);
}
});<!doctype html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="WelcomeController as self">
<div class="container">
<form name="form" class="col-md-4">
<div class="form-group">
<input class="form-control" ng-model="self.account.firstName" placeholder="firstName" ng-required="true" />
<input class="form-control" ng-model="self.account.lastName" placeholder="lastName" ng-required="true" />
<input class="form-control" ng-model="self.account.street" placeholder="street" ng-required="true" />
<label class="radio-inline">
<input name="i-account" type="radio" ng-model="self.account.gender" ng-value="1" ng-required="true">
<span class="fa fa-circle"></span> Male
</label>
<label class="radio-inline">
<input name="i-account" type="radio" ng-model="self.account.gender" ng-value="2" ng-required="true">
<span class="fa fa-circle"></span> Female
</label>
</div>
<div class="form-group">
<input class="form-control" ng-model="self.staff.firstName" placeholder="firstName" />
<input class="form-control" ng-model="self.staff.lastName" placeholder="lastName" />
<label class="radio-inline">
<input name="i-staff" type="radio" ng-model="self.staff.gender" ng-value="1" ng-required="true">
<span class="fa fa-circle"></span> Male
</label>
<label class="radio-inline">
<input name="i-staff" type="radio" ng-model="self.staff.gender" ng-value="2" ng-checked="true" ng-required="true">
<span class="fa fa-circle"></span> Female
</label>
</div>
<button class="btn btn-primary" ng-click="self.prvStep()">Previous</button>
<button class="btn btn-success" ng-click="self.saveStep()" ng-disabled="formStep2.$invalid">finish</button>
</form>
</div>
</body>
</html>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加