2016-08-19 74 views
0

我是AngularJs的新手,我遇到此問題。 我如何發送文本數據從文本框功能排序?我在按鈕標記附近使用了document.getElementById,但它不起作用(函數傳遞的值未定義),我不想使用角度模型概念。 任何人都可以幫助我。如何將數據從文本框發送到angularjs中的控制器中的函數?我無法將文本框的值發送到排序函數

<!DOCTYPE html> 
     <html lang="en" ng-app = "myfirstangularapp"> 
    <body> 
<div class="row" ng-controller = " dishDetailController as dishcntr "> 
    <div class="col-xs-6"> 
     <ul class = "media-list"> 
      <li class = "media"> 
      <a class = "media-left" href = "#" > 
       <img class = "media-object" src={{dishcntr.dish.image}} alt="crunchy rice receipe"> 
      </a> 
      <div class = "media-body"> 
       <h2 class = "media-heading"> {{dishcntr.dish.name}} <span class = "label label-danger">{{dishcntr.dish.label}}</span> 
       <span class = "badge">{{dishcntr.dish.price}}</span> 
       </h2> 
      <p>{{dishcntr.dish.information}}</p> 
      </div> 
      </li> 
     </ul> 
    </div> 
    <div class = "col-xs-12"> 
     <div class = "inputfield"> 
      <input type = "text" id = "inputfield" value = "hi" name="fillin"> 
      <button value ="order" ng-click="dishcntr.sorted(document.getElementById('#inputfield').value)" name = "order">order</button> 
     </div> 
    </div> 

    <div class="col-xs-12" ng-repeat="listcomments in dishcntr.comment| orderBy: dishcntr.text"> 
    <blockquote> 
     <p> {{listcomments.comments}} 
     </p> 
     <footer> 
      {{listcomments.author}} on {{listcomments.date| date }} 
     </footer> 
    </blockquote> 
    </div> 
</div> 

<script> 
    var app = angular.module('myfirstangularapp',[]); 
    app.controller('dishDetailController',function(){ 
     var dish = {name:'cheeseburger', label:'appetizer', price:'4.99',information:'contains cheese stuffed between two bread pieces also available with different vegetables.',image:'./images/elaicheesecake.png'}; 
     this.dish = dish; 
     var comment = [ 
      {comments:'The dish is good', date:'2016-08-08',author:'Patterson',rating:'4'} 
     ]; 
     this.comment = comment; 
     this.text = ''; 
     this.sorted = function(temp) 
     { 
      window.alert(temp); 

     } 
    }); 
</script> 

+0

可我知道,你爲什麼不;噸希望使用*角最酷的功能(雙向綁定)*? –

+0

請在您的輸入中輸入ng-model:D –

+0

我想使用orderby篩選器(作者,日期和評級)排序評論數組中的評論。我不知道如何使用它的雙向綁定。 – Wheel60

回答

1

像這樣

<div class = "inputfield"> 
      <input type = "text" ng-model="dishcntr.fillin" name="fillin"> 
      <button value ="order" ng-click="dishcntr.sorted()" name = "order">order</button> 
</div> 

在控制器

this.sorted = function(){ 
    window.alert(this.fillin); 
} 
相關問題