我遇到的问题是ng-model无法绑定到范围。
我的网络应用程序的这一部分设置为向导,包含三个步骤。
我希望在第一步中包含验证,以防止用户在未满足某些要求的情况下进入第二步。但是,为此,我需要使用ng-model将firstName和secondName绑定到范围。
到目前为止,这是我的代码,我还包括了一个here:
wizard.html
<div id="wizard-container" ng-controller="WizardCtrl as vm">
<div id="wizard-step-container">
<ul class="nav nav-pills nav-justified">
<li ng-repeat="step in vm.steps" ng-class="{'active':step.step == vm.currentStep}"><a ng-click="vm.gotoStep(step.step)" href="">{{step.step}}. {{step.name}}</a></li>
</ul>
</div>
<div id="wizard-content-container">
<div ng-include src="vm.getStepTemplate()"></div>
</div>
<div id="wizard-navigation-container">
<div class="pull-right pull-right-padding">
<span class="btn-group">
<button ng-disabled="vm.currentStep <= 1" class="btn btn-default" name="previous" type="button" ng-click="vm.gotoStep(vm.currentStep - 1)"></i>Previous</button>
<button ng-disabled="vm.currentStep >= vm.steps.length" class="btn btn-primary" name="next" type="button" ng-click="vm.gotoStep(vm.currentStep + 1)">Next</button>
</span>
<button ng-disabled="vm.currentStep != vm.steps.length" class="btn btn-success" name="next" type="button" ng-click="vm.save()">Save</button>
</div>
</div>
</div>
step1.html
<div class="row">
<h3 class="text-center">Step 1: Please enter your full name</h3>
<br/>
<div class="col-md-6">
<input type="email" class="form-control" placeholder="First Name" ng-model="formData.firstName">
</div>
<div class="col-md-6">
<input type="email" class="form-control" placeholder="Last Name" ng-model="formData.lastName">
</div>
</div>
<br>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Please enter your full name.
</div>
wizard.js
angular.module('dingocvWebApp')
.controller('WizardCtrl', function ($scope, stub) {
// Wizard methods
var vm = this;
vm.currentStep = 1;
vm.formData = {};
vm.steps = [
{
step: 1,
name: 'Name',
template: 'views/wizard/step1.html'
},
{
step: 2,
name: 'Email',
template: 'views/wizard/step2.html'
},
{
step: 3,
name: 'Job Category',
template: 'views/wizard/step3.html'
},
];
vm.gotoStep = function(newStep) {
vm.currentStep = newStep;
console.log(vm.formData.firstName);
};
vm.getStepTemplate = function(){
for (var i = 0; i < vm.steps.length; i++) {
if (vm.currentStep === vm.steps[i].step) {
return vm.steps[i].template;
}
}
};
// Step 1
// Step 2
// Step 3
$scope.jobCategories = stub.getJobCategories();
// Yeoman defaults
this.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
答案 0 :(得分:1)
我得到了它的工作。这些都是调整:
<强>的script.js 强>
我声明了formData
对象,以便我们人类可以看到它的界面:
//Model
vm.currentStep = 1;
vm.formData = {firstName: null, lastName: null};
每个步骤都获得了一个isReady()
函数,用于检查vm
对象的状态,以确定用户是否可以与该步骤进行交互:
vm.steps = [
{
step: 1,
name: "First step",
template: "step1.html",
isReady: function() { return true; }
},
{
step: 2,
name: "Second step",
template: "step2.html",
isReady: function() { return vm.formData.firstName && vm.formData.lastName; }
},
{
step: 3,
name: "Third step",
template: "step3.html",
isReady: function() { return true; } // Didn't really care to write this one, sorry :)
},
];
然后,引入了vm.canGoForward()
方法。它检查链中下一步的准备情况(和存在):
vm.canGoForward = function() {
var res = true,
i,
nextStateIndex = vm.currentStep + 1;
if (nextStateIndex > vm.steps.length) {
return false;
}
for (i = 1; res && i <= nextStateIndex; i++) {
res = (res && vm.steps[i-1].isReady());
}
return !!res;
}
(如果上面的代码看起来有点混乱,可能是因为currentStep
成员的1索引基础;我更喜欢它是基于0的......)
<强> step1.html 强> 文本框应该确实有“vm”。对象标识符预先附加到ng-model值。这指示角度引擎获取/设置适当的值。
<强>的index.html 强>
前进按钮已更改,因此ng-disabled
指令将相应于vm.canGoForward()
函数:
<button ng-disabled="!vm.canGoForward()" class="btn btn-primary" name="next" type="button" ng-click="vm.gotoStep(vm.currentStep + 1)">Next step <i class="fa fa-arrow-right"></i></button>