two way data binding not working as expected in angular
Question
I'm trying to achieve two way data binding by taking the data from the input and show it in the comment box in realtime.
Here is my HTML Code.
<body>
<div class="container">
<div class="row row-content">
<div class="col-xs-12" ng-controller="dishDetailController as dish">
<ul class="media-list">
<li class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail" ng-src="{{dish.image}}" alt="Uthapizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span>
</h2>
<p>{{dish.description}}</p>
</div>
</li>
</ul>
</div>
<div class="col-xs-9 col-xs-offset-1" ng-controller="dishDetailController as dish">
<h3>Customer Comments
<small>Sort by:
<input type="text" ng-model="dish.date">
</small>
</h3>
<blockquote ng-repeat="dish in dish.comments | orderBy: dish.date ">
<p>{{dish.rating}} stars</p>
<p>{{dish.comment}}</p>
<small>{{dish.author}} {{dish.date | date}}</small>
</blockquote>
<blockquote ng-controller="DishCommentController">
<p>{{holder.author}}</p>
<!-- achieve data binding here -->
</blockquote>
</div>
</div>
<div class="form-horizontal" role="form" name='commentForm' ng-controller="DishCommentController">
<div class="form-group">
<label class="col-xs-offset-1 col-xs-2 control-label">Your Name</label>
<div class="col-xs-5">
<input type="text" class="form-control" placeholder="Enter Your name" ng-model="holder.author">
</div>
</div>
Here is my Javascript code.
'use strict';
angular.module('confusionApp', [])
.controller('MenuController', ['$scope', function($scope) {
$scope.tab = 1;
$scope.filtText = '';
$scope.showDetails = false;
var dishes = [{
name: 'Uthapizza',
image: 'images/uthapizza.png',
category: 'mains',
label: '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.',
comment: ''
},
{
name: 'Zucchipakoda',
image: 'images/zucchipakoda.png',
category: 'appetizer',
label: '',
price: '1.99',
description: 'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
comment: ''
},
{
name: 'Vadonut',
image: 'images/vadonut.png',
category: 'appetizer',
label: 'New',
price: '1.99',
description: 'A quintessential ConFusion experience, is it a vada or is it a donut?',
comment: ''
},
{
name: 'ElaiCheese Cake',
image: 'images/elaicheesecake.png',
category: 'dessert',
label: '',
price: '2.99',
description: 'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms',
comment: ''
}
];
$scope.dishes = dishes;
$scope.select = function(setTab) {
$scope.tab = setTab;
if (setTab === 2) {
$scope.filtText = "appetizer";
} else if (setTab === 3) {
$scope.filtText = "mains";
} else if (setTab === 4) {
$scope.filtText = "dessert";
} else {
$scope.filtText = "";
}
};
$scope.isSelected = function(checkTab) {
return ($scope.tab === checkTab);
};
$scope.toggleDetails = function() {
$scope.showDetails = !$scope.showDetails;
};
}])
.controller('ContactController', ['$scope', function($scope) {
$scope.feedback = {
mychannel: '',
firstName: "",
lastName: "",
agree: false,
email: ""
};
$scope.channels = [{
value: 'tel',
label: 'Tel.'
}, {
value: 'Email',
label: 'Email'
}];
$scope.invalidChannelSelection = false;
}])
.controller('FeedbackController', ['$scope', function($scope) {
$scope.sendFeedback = function() {
console.log($scope.feedback);
if ($scope.feedback.agree && ($scope.feedback.mychannel == "")) {
$scope.invalidChannelSelection = true;
console.log('incorrect');
} else {
$scope.invalidChannelSelection = false;
$scope.feedback = {
mychannel: "",
firstName: "",
lastName: "",
agree: false,
email: ""
};
$scope.feedback.mychannel = "";
$scope.feedbackForm.$setPristine();
console.log($scope.feedback);
}
}
}])
.controller('dishDetailController', ['$scope', function($scope) {
var dish = {
name: 'Uthapizza',
image: 'images/uthapizza.png',
category: 'mains',
label: '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: 5,
comment: "It's your birthday, we're gonna party!",
author: "25 Cent",
date: "2011-12-02T17:57:28.556094Z"
},
]
};
$scope.dish = dish;
dish.date = '';
}])
.controller('DishCommentController', ['$scope', function($scope) {
//Step 1: Create a JavaScript object to hold the comment from the form
$scope.holder = {
rating: 5,
author: '',
comment: ''
};
$scope.submitComment = function() {
//Step 2: This is how you record the date
$scope.date = new Date().toISOString();
// Step 3: Push your comment into the dish's comment array
$scope.dish.comments.push($scope.holder);
//Step 4: reset your form to pristine
//Step 5: reset your JavaScript object that holds your comment
}
}])
;
I unable to figure it out as to how to make it work.
1 answers
solution1
0 2017-04-08 16:44:48
I found the answer. The problem was that I was using too many controllers and each of them were creating different scopes. So, I wasn't able to achieve the result I wanted.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Angular two-way binding not working as expected
Two way binding on angular material slide toggle not working as expected (Angular 4)
Two way data binding in angular not working
Angular two way data binding not working
two way data binding in angular 2
two way data binding with Angular 1
Angular date filter not working with two-way data binding
Angular two way data binding not working when $scope is updated
Angular Directive Two Way Binding Not Working
Angular 1.5 Component Two Way Binding Not Working
Related Tags