如何将数据从文本框发送到angularjs中的控制器中的函数?我无法将文本框的值发送到Sorted函数

时间:2016-08-19 19:39:26

标签: html angularjs

我是AngularJs的新手,我有这个问题。 如何从文本框发送文本数据到功能排序?我在 Button标签附近使用了document.getElementById,但它不起作用(函数传递的值未定义),我不想使用角度模型概念。 谁能帮帮我吗。

<!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>

1 个答案:

答案 0 :(得分: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);
}