我的angularjs应用程序中有两个表单 一个用于创建新用户,另一个用于编辑
除了姓名
之外,两种形式完全相同从
编辑 <form name="editForm">
<div ng-cloak="" class="tabsdemoDynamicHeight">
<md-content>
<md-tabs md-dynamic-height="" md-border-bottom="">
<md-tab label="General Information">
<md-content class="md-padding">
<div class="row">
<div class="col-sm-2" ng-class="{ 'has-error': editForm.projanyname.$dirty && editForm.projectname.$error.required }">
<md-input-container class="md-block">
<label for="projectname">Project Name *</label>
<input type="text" name="projectname" id="projectname" class="form-control" ng-model="proj.copyProjectRow.projectName" required="">
<span ng-show="editForm.projectname.$dirty && editForm.projectname.$error.required" class="help-block">project name is required</span>
</md-input-container>
</div>
<div class="col-sm-2" ng-class="{ 'has-error': editForm.projectcode.$dirty && editForm.projectcode.$error.required }">
<md-input-container class="md-block">
<label for="lastname">Project Code *</label>
<input type="text" name="projectcode" id="projectcode" class="form-control" ng-model="proj.copyProjectRow.projectCode" required />
<span ng-show="editForm.projectcode.$dirty && editForm.projectcode.$error.required" class="help-block">project code is required</span>
</md-input-container>
</div>
<div class="col-sm-2" ng-class="{ 'has-error': editForm.city.$dirty && editForm.city.$error.required }">
<md-input-container class="md-block">
<label for="project">City *</label>
<input type="text" name="city" id="city" class="form-control" ng-model="proj.copyProjectRow.city" required />
<span ng-show="editForm.city.$dirty && editForm.city.$error.required" class="help-block">city is required</span>
</md-input-container>
</div>
<div class="col-sm-2" ng-class="{ 'has-error': editForm.address1.$dirty && editForm.address1.$error.required }">
<md-input-container class="md-block">
<label for="address1">First Address *</label>
<input type="text" name="address1" id="address1" class="form-control" ng-model="proj.copyProjectRow.firstAddress" required />
<span ng-show="editForm.address1.$dirty && editForm.address1.$error.required" class="help-block">First address is required</span>
</md-input-container>
</div>
<div class="col-sm-2">
<md-input-container class="md-block">
<label for="address2">Second Address</label>
<input type="text" name="address2" id="address2" class="form-control" ng-model="proj.copyProjectRow.secondAddress" />
</md-input-container>
</div>
<div class="col-sm-2">
<md-input-container class="md-block">
<label for="province">province</label>
<input type="text" name="province" id="province" class="form-control" ng-model="proj.copyProjectRow.province" />
</md-input-container>
</div>
<div class="col-sm-2">
<md-input-container class="md-block">
<label for="building">building</label>
<input type="text" name="building" id="building" class="form-control" ng-model="proj.copyProjectRow.building" />
</md-input-container>
</div>
<div class="col-sm-2" ng-class="{ 'has-error': editForm.client.$dirty && editForm.client.$error.required }">
<md-autocomplete id="autocomplete_edit" force-select md-select-on-match="true" required md-input-name="editclient" md-input-minlength="2" md-input-maxlength="18" md-selected-item="proj.selectedItem" md-search-text="proj.searchText" md-items="item in proj.querySearch(proj.searchText)" md-item-text="item.companyCode" md-floating-label="cleint *" md-selected-item-change="proj.buildCPList(item.companyCode)">
<md-item-template>
<span md-highlight-text="proj.searchText">{{item.companyCode}} </span>
</md-item-template>
<span ng-show="editForm.client.$dirty && editForm.client.$error.required" class="help-block">client is required</span>
</md-autocomplete>
</div>
<bind-expression name="selectedItem" ng-required="true" expression="proj.selectedItem.companyCode" ng-model="proj.copyProjectRow.client" />
<div class="col-sm-2">
<md-input-container>
<label>contactPerson</label>
<md-select ng-disabled="proj.selectedItem==null" ng-model="proj.copyProjectRow.contactPerson" >
<md-option ng-repeat="person in proj.contactPersons" ng-value="person.name" ng-click="proj.setcontactPersonValue(person)" ng-value="proj.selectedContactPerson">
{{person.name}}
</md-option>
</md-select>
</md-input-container>
</div>
<div class="col-sm-2">
<md-input-container class="md-block">
<label for="postcode">postcode</label>
<input type="text" name="postcode" id="postcode" class="form-control" ng-model="proj.copyProjectRow.postCode" />
</md-input-container>
</div>
</div>
</md-content>
</md-tab>
</md-content>
</div>
<button class="btn btn-primary" ng-disabled="editForm.$invalid" type="button" ng-click="proj.saveEditProject(proj.copyProjectRow)">OK</button>
<button class="btn btn-warning" type="button" ng-click="proj.hideEditProjectPanel()">Cancel</button>
</form>
和
中的新内容<form name="newProjectForm" ng-submit="proj.saveNewProject(proj.project)" role="newProjectForm">
<div ng-cloak="" class="tabsdemoDynamicHeight">
<md-content>
<md-tabs md-dynamic-height="" md-border-bottom="">
<md-tab label="General Information">
<md-content class="md-padding">
<div class="row">
<div class="col-sm-2" ng-class="{ 'has-error': newProjectForm.projanyname.$dirty && newProjectForm.projectname.$error.required }">
<md-input-container class="md-block">
<label for="projectname">Project Name *</label>
<input type="text" name="projectname" id="projectname" class="form-control" ng-model="proj.project.projectName" required="">
<span ng-show="newProjectForm.projectname.$dirty && newProjectForm.projectname.$error.required" class="help-block">project name is required</span>
</md-input-container>
</div>
<div class="col-sm-2" ng-class="{ 'has-error': newProjectForm.projectcode.$dirty && newProjectForm.projectcode.$error.required }">
<md-input-container class="md-block">
<label for="lastname">Project Code *</label>
<input type="text" name="projectcode" id="projectcode" class="form-control" ng-model="proj.project.projectCode" required />
<span ng-show="newProjectForm.projectcode.$dirty && newProjectForm.projectcode.$error.required" class="help-block">project code is required</span>
</md-input-container>
</div>
<div class="col-sm-2" ng-class="{ 'has-error': newProjectForm.city.$dirty && newProjectForm.city.$error.required }">
<md-input-container class="md-block">
<label for="project">City *</label>
<input type="text" name="city" id="city" class="form-control" ng-model="proj.project.city" required />
<span ng-show="newProjectForm.city.$dirty && newProjectForm.city.$error.required" class="help-block">city is required</span>
</md-input-container>
</div>
<div class="col-sm-2" ng-class="{ 'has-error': newProjectForm.address1.$dirty && newProjectForm.address1.$error.required }">
<md-input-container class="md-block">
<label for="address1">First Address *</label>
<input type="text" name="address1" id="address1" class="form-control" ng-model="proj.project.address1" required />
<span ng-show="newProjectForm.address1.$dirty && newProjectForm.address1.$error.required" class="help-block">First address is required</span>
</md-input-container>
</div>
<div class="col-sm-2">
<md-input-container class="md-block">
<label for="address2">Second Address</label>
<input type="text" name="address2" id="address2" class="form-control" ng-model="proj.project.address2" />
</md-input-container>
</div>
<div class="col-sm-2">
<md-input-container class="md-block">
<label for="province">province</label>
<input type="text" name="province" id="province" class="form-control" ng-model="proj.project.province" />
</md-input-container>
</div>
<div class="col-sm-2">
<md-input-container class="md-block">
<label for="building">building</label>
<input type="text" name="building" id="building" class="form-control" ng-model="proj.project.building" />
</md-input-container>
</div>
<div class="col-sm-2" ng-class="{ 'has-error': newProjectForm.client.$dirty && newProjectForm.client.$error.required }">
<md-autocomplete id="autocomplete_new" force-select md-select-on-match="true" required md-input-name="client" md-input-minlength="2" md-input-maxlength="18" md-selected-item="proj.selectedItem" md-search-text="proj.searchText" md-items="item in proj.querySearch(proj.searchText)" md-item-text="item.companyCode" md-floating-label="cleint *" md-selected-item-change="proj.buildCPList(item.companyCode)">
<md-item-template>
<span md-highlight-text="proj.searchText">{{item.companyCode}} </span>
</md-item-template>
<span ng-show="newProjectForm.client.$dirty && newProjectForm.client.$error.required" class="help-block">client is required</span>
</md-autocomplete>
</div>
<bind-expression name="selectedItem" ng-required="true" expression="proj.selectedItem.companyCode" ng-model="proj.project.client" />
<div class="col-sm-2">
<md-input-container>
<label>contactPerson</label>
<md-select ng-disabled="proj.selectedItem==null" ng-model="proj.project.contactPerson" >
<md-option ng-repeat="person in proj.contactPersons" ng-value="person.name" ng-click="proj.setcontactPersonValue(person)" ng-value="proj.selectedContactPerson">
{{person.name}}
</md-option>
</md-select>
</md-input-container>
</div>
<div class="col-sm-2">
<md-input-container class="md-block">
<label for="postcode">postcode</label>
<input type="text" name="postcode" id="postcode" class="form-control" ng-model="proj.project.postcode" />
</md-input-container>
</div>
</div>
</md-content>
</md-tab>
<md-tab label="2">
<md-content class="md-padding">
</md-content>
</md-tab>
<md-tab label="Profile">
<md-content class="md-padding">
<p>Not Used</p>
</md-content>
</md-tab>
</md-tabs>
</md-content>
</div>
<div class="form-actions">
<button type="submit" ng-disabled="newProjectForm.$invalid" class="btn btn-primary">Add</button>
<img ng-if="proj.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
<button class="btn btn-warning" type="button" ng-click="proj.hideNewProjectPanel()">Cancel</button>
</div>
</form>
两个表单(编辑和新表单)存在于同一页面中(我只隐藏其中一个)
我在表单中有md-autocomplete字段和md-select, 我从数据库中得到了md-autocomplete的值,并且根据它的值我创建了md-select选项
但是当我在md-autocomplete上选择值时,对数据库的调用会完成两次 并且这两个表单存在于同一页面中(只隐藏其中一个) 但是,当我做任何事情时,它会两次出手
我该怎么做才能防止两次执行动作?