我想防止我的angularjs应用程序中的重复

时间:2016-08-19 16:02:56

标签: angularjs

我的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上选择值时,对数据库的调用会完成两次 并且这两个表单存在于同一页面中(只隐藏其中一个) 但是,当我做任何事情时,它会两次出手

我该怎么做才能防止两次执行动作?

0 个答案:

没有答案