junior dev junior dev - 5 months ago 27
Javascript Question

how to filter list by using two way binding input text in angularjs

[entire work untill now][1]


I want to sort the list of comments which are an array of dish with some comments which have" rating , author and date". as you see in photo by the input text(sort by) with typing (rating,date and author)by user with using two way binding ,I want to sort the comments list by the input text.

<!DOCTYPE html>
<html lang="en" ng-app="confusionApp">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Ristorante Con Fusion: Menu</title>
<!-- Bootstrap -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">


<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>

<div class="container">
<div class="row row-content" ng-controller="dishDetailController as detailCtrl">
<div class="col-xs-12">
<ul class="media-list tab-pane fade in active" <li class="media" ng-repeat="dish in detailCtrl.dish">


enter image description here






<h2 class="media-heading">{{dish.name}}
<span class="lable">{{dish.lable}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
<br>

</div>

<span class="design">Customer Comments </span>
<span class="sort">Sort by: </span>
<input type="text" ng-model="search"></input>
{{search}}
</li>
</ul>
</div>
<div class="col-xs-9 col-xs-ofsfset-1">

<div ng-repeat="c in detailCtrl.dish[0].commentss">
<blockquote>
<p ng-bind="c.rating + ' stars'"></p>
<p ng-bind="c.comment"></p>

<footer>{{c.author}}, {{c.date | date: mediumDate }}</footer>
</blockquote>
</div>
</div>

</div>
</div>
<script src="../bower_components/angular/angular.min.js"></script>


<script>
var app = angular.module('confusionApp', []);

app.controller('dishDetailController', function() {

var dish = [{
name: 'Uthapizza',
image: 'images/uthapizza.png',
category: 'mains',
lable: 'Hot',
price: '4.99',
description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments: [{
rating: 5,
comment: "Imagine all the eatables, living in conFusion!",
author: "John Lemon",
date: "2012-10-16T17:57:28.556094Z"
}, {
rating: 4,
comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author: "Paul McVites",
date: "2014-09-05T17:57:28.556094Z"
}, {
rating: 3,
comment: "Eat it, just eat it!",
author: "Michael Jaikishan",
date: "2015-02-13T17:57:28.556094Z"
}, {
rating: 4,
comment: "Ultimate, Reaching for the stars!",
author: "Ringo Starry",
date: "2013-12-02T17:57:28.556094Z"
}, {
rating: 2,
comment: "It's your birthday, we're gonna party!",
author: "25 Cent",
date: "2011-12-02T17:57:28.556094Z"
}

]
}];

this.dish = dish;

});
</script>

</body>

</html>



Answer

Here is a working DEMO

Basically your code had a couple issues:

1) Your HTML code had some badly mismatched tags

2) You were not binding your model value on your input field to your detailCtrl

3) As a result of 1), your comments section was placed outside of the div with the ng-controller on it, so you had no access to the detailCtrl.dish object

New Code:

HTML

<body>
    <div class="container">
        <div class="row row-content" ng-controller="dishDetailController as detailCtrl">
            <div class="col-xs-12">
                <ul class="media-list tab-pane fade in active">
                    <li class="media" ng-repeat="dish in detailCtrl.dish">
                        <h2 class="media-heading">
                            {{dish.name}}
                            <span class="lable">{{dish.lable}}</span>
                            <span class="badge">{{dish.price | currency}}</span>
                        </h2>
                        <p>{{dish.description}}</p>
                        <br>
                        <span class="design">Customer Comments </span>
                        <span class="sort">Sort by: </span>
                        <input type="text" ng-model="detailCtrl.search"></input>
                        {{detailCtrl.search}}
                    </li>
                </ul>
            </div>
            <div class="col-xs-9 col-xs-ofsfset-1">
                <div ng-repeat="c in detailCtrl.dish[0].comments | orderBy:detailCtrl.search">
                    <blockquote>
                        <p ng-bind="c.rating + ' stars'"></p>
                        <p ng-bind="c.comment"></p>
                        <!-- <footer>{{c.author}}, {{c.date | date: 'MMM. dd,yyyy' }}</footer> -->
                        <footer>{{c.author}}, {{c.date | date: mediumDate }}</footer>
                    </blockquote>
                </div>
            </div>
        </div>
    </div>
</body>

JS

var app = angular.module('confusionApp', []);

app.controller('dishDetailController', function() {
  this.search = "rating";
  this.dish = [{
    name: 'Uthapizza',
    image: 'images/uthapizza.png',
    category: 'mains',
    lable: 'Hot',
    price: '4.99',
    description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
    comments: [
      {
        rating: 5,
        comment: "Imagine all the eatables, living in conFusion!",
        author: "John Lemon",
        date: "2012-10-16T17:57:28.556094Z"
      }, 
      {
        rating: 4,
        comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
        author: "Paul McVites",
        date: "2014-09-05T17:57:28.556094Z"
      }, 
      {
        rating: 3,
        comment: "Eat it, just eat it!",
        author: "Michael Jaikishan",
        date: "2015-02-13T17:57:28.556094Z"
      }, 
      {
        rating: 4,
        comment: "Ultimate, Reaching for the stars!",
        author: "Ringo Starry",
        date: "2013-12-02T17:57:28.556094Z"
      }, 
      {
        rating: 2,
        comment: "It's your birthday, we're gonna party!",
        author: "25 Cent",
        date: "2011-12-02T17:57:28.556094Z"
      }

    ]
  }];

});