[英]some angular material content does not show using angular-route
我是角度js和角度材料的新手。 我正在使用包含4个步骤的Web表单应用程序(视图)我正在使用$ route提供程序在视图之间进行切换,但是在第一步中,仅显示外部内容,而md-content内部的所有内容均不在此处显示
my-step1.html
<div ng-controller="Step1Ctrl" layout="column" layout-align="center">
<div layout-gt-sm="row" layout-align="center">
<div class="banner">
<p> <span class="step">STEP 1</span> List all household members who are infants, children, and students up to and including grade 12</p>
</div>
</div>
<md-content layout-padding>
<form name="Form" class="wrap" novalidate>
<div layout-gt-sm="row" layout-align="center" class="page md-inline-form" data-ng-repeat="child in childern">
<md-input-container class="md-block ele ">
<label>First Name</label>
<input required name="firstName" ng-model="child.firstName">
<div ng-messages="Form.firstName.$error">
<div ng-message="required">First Name is required.</div>
</div>
</md-input-container>
<md-input-container class="md-block ele" style="max-width:60px;">
<label>MI</label>
<input required name=" middleName " ng-model="child.middleName ">
<div ng-messages="Form.middleName.$error ">
<div ng-message="required ">Middle Name is required.</div>
</div>
</md-input-container>
<md-input-container class="md-block ele ">
<label>Last Name</label>
<input required name="lastName " ng-model="child.lastName ">
<div ng-messages="Form.lastName.$error ">
<div ng-message="required ">Last Name is required.</div>
</div>
</md-input-container>
<div class="cell ">
<label> <b>Student?</b></label>
<div class="ele">
<md-radio-group ng-model="child.IsStudent">
<md-radio-button value="Yes">Yes</md-radio-button>
<md-radio-button value="No"> No </md-radio-button>
</md-radio-group>
</div>
</div>
<div class="cell ">
<label><b> Child's situation?(check all that apply) </b></label>
<div>
<md-checkbox ng-model="child.IsFoster">
Foster Child
</md-checkbox>
<md-checkbox ng-model="child.IsHomless">
Homeless, Migrant, Runaway
</md-checkbox>
</div>
</div>
<div id='rem' remove-me>
<md-button class="md-raised md-primary remove" ng-if="childern.length != 1" ng-click="removeChild(childern,$index)">
</div>
</div>
</form>
</md-content>
</div>
app.js
'use strict'
angular.module('myform', ['ngRoute', 'ngMaterial', 'ngAnimate', 'ngMessages', 'DataCollector'])
.controller('Step1Ctrl', ['formCache', "$location", function ($scope, formCache, $location) {
var SkipStep4 = false;
$scope.childern = [{}];
// formCache.set($scope.childern.id, $scope.childern);
$scope.addChild = function (index) {
$scope.childern.push({
'id': 'index+1'
});
};
$scope.removeChild = function (array, index) {
if ($scope.childern.length > 1) {
array.splice(index, 1);
}
};
$scope.checkNextStep = function () {
for (var index = 0; index < $scope.childern.length; index++) {
if ($scope.childern[index].IsFoster === true) {
SkipStep4 = false;
} else {
SkipStep4 = false;
}
}
if (SkipStep4 === true) {
$location.path('/step4');
}
}
}]);
更新插件链接: http ://plnkr.co/edit/jz4pbBh4E9HdmshQfu7e?p=preview
嗯,这真的可以吗?
请尝试。 我认为这是路线问题,不是实质问题
我知道了,控制器抛出错误,因为我有方括号来插入独立性,我认为在1.4.8版本中,您只需要在函数中提及参数。 所以我将控制器更改为
.controller ('Step1Ctrl',function ($scope, $location){
//code here
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.