편집하다:
Maher의 수정 된 코드를 기반으로 내 문제를 다시 설명하려고합니다. 내 HTML 페이지에는 Form 하나만 있습니다. 양식 안에 # step1 안에있는 모든 필드 를 내 계정 개체 에 저장하고 싶습니다 .
<div id = " # step1 "> 에서 HTML을 확인하십시오.
그리고 <div id = " # step2 "> 안의 필드
내 직원 개체 에 저장하고 싶습니다 .
그래서 문제 는 계정이나 직원 개체에서 선택한 성별 의 가치 를 잃는다는 것입니다. 모든 필드는 개체에 올바르게 바인딩되고 액세스 할 수 있습니다. 에서 #의 1 단계 성별 라디오 자체에 바인더 제본된다. account.gender 및 # step2 에서 성별 라디오 는 self에 바인딩됩니다. staff.gender . 그러나 계정에서 성별의 가치를 얻으려고 시도하면 정의되지 않았습니다. 라디오 버튼이 2 개 이상인 경우 각도가 성별 값을 재정의하는 것 같습니다.
예. 나는 내 형태와 클릭을 기입 한 후 것은 제출 내가 원하는 이 결과 같은 얻을 :
계정 개체 :
직원 개체 :
그러나 나는 얻는다 :
계정 개체 :
라디오를 올바르게 바인딩하려면 어떻게해야합니까? 각 단계마다 사용자의 성별을 얻고 그 정보를 다른 개체에 저장하고 싶습니다. 여기 계정과 직원처럼.
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-models를 바인딩하고 전송할 수있는 방법을 알아내는 데 도움이되기를 바랍니다.
프로젝트에서했던 것처럼 예제를 만들었습니다. 예제를 실행할 수 있습니다. 마지막 단계에서 브라우저 콘솔을 확인하십시오.
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] 삭제
몇 마디 만하겠습니다