2014-09-25 4 views
0

Я довольно много новичка с AngularJS, и я пытаюсь представить форму, следующим образом:не ngSubmit получать представленный

<div ng-include="APP_URL + '/view/myResolver/searchForm.html'" ng-controller="MySearchFormController"> </div> 

Это мой searchForm.html:

<div class="container"> 
<div class="row"> 
    <div class="col-md-14"> 
     <div class="well"> 
      <div class="col-md-9"> 
       <form ng-submit="submit()" class="form-horizontal clearfix" role="form" > 
         <div class="form-group"> 
          <label for="teamName" class="col-md-3 control-label">Team name</label> 
          <div class="col-md-9"> 
           <input type="text" ng-model="myName" id="myName" class="form-control"> 
          </div> 
         </div> 
      </div> 
<div class="row"> 
       <div class="col-md-0"></div> 
        <button ng-click="onFormReset()" class="btn btn-default">Reset</button> 
        <input type="submit" id="submit" class="btn btn-primary" value="Search"/> 
</div> 
       </form> 

      {{teamName}} 
     </div> 
    </div> 
</div> 

UPDATE

контроллер:

angular.module('MyApp') 
    .controller('MySearchFormController', ['$scope', function($scope){ 
    $scope.submit = function(){ 

     if ($scope.myName) { 
     alert($scope.myName); 
     $scope.teamName = this.teamName; 
     } 
    } 
    }]); 

В настоящее время текст автоматически появляется в поле {{имя_группы}}. Вместо этого я хотел бы, чтобы он работал только на Submit(), а именно нажав кнопку «Поиск».

+0

Можете ли вы показать свой контроллер? –

+0

Я только что отредактировал его. – thitami

+0

Фактически 'this.teamName' ссылается на область действия метода $ scope.submit. Я думаю, вы хотите сделать '$ scope.teamName = $ scope.myName;' – meriadec

ответ

0

Вы можете попробовать так:

function demo ($scope) { 
 
    
 
    $scope.submit = function() { 
 
    $scope.submitted = true; 
 
    }; 
 
    
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app ng-controller="demo"> 
 

 
    <form ng-submit="submit()"> 
 
    <input type="text" ng-model="teamName"> 
 
    <button>Submit</button> 
 
    </form> 
 
    
 
    <p ng-if="submitted">{{ teamName }}</p> 
 
    
 
</div>

НО это не является оптимальным, так как только вы представили один раз, $scope.submitted является true и вы получите ту же проблему, опять же.

SO, я рекомендовал бы вам не связать ваш {{ teamName }} к той же ссылке как вход:

function demo ($scope) { 
 
    
 
    $scope.submit = function() { 
 
    
 
    $scope.teamNameCopy = angular.copy($scope.teamName); 
 
    
 
    }; 
 
    
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app ng-controller="demo"> 
 
    
 
    <form ng-submit="submit()"> 
 
    <input type="text" ng-model="teamName"> 
 
    <button>Submit</button> 
 
    </form> 
 
    
 
    <p>{{ teamNameCopy }}</p> 
 
    
 
</div>

+0

Спасибо, что поделились ею, meriadec. Ваш фрагмент содержит именно то, что я пытаюсь сделать, но в моем коде есть еще одна проблема, так как снова он не работает. Btw, как я могу отредактировать тему? Он должен быть * not * вместо * now *. – thitami

0

ОК, проблема решена.

К сожалению, это была проблема, связанная с неправильным закрытием тегов html, а не

Смежные вопросы