Languages: HTML, CSS, AngularJS 9. Define an array called Dinners and an object

Question

Languages: HTML, CSS, AngularJS

9. Define an array called Dinners and an object in your controller called Dinner, with the following attributes a. appetizer b. mainCourse c. side d. side2 e. Dessert f. Your html should have a div which has a header called dinner - The div should span the full width of the page The left have of the div should contain 5 input fields which are bound (modeled) to your Dinner object attributes. The inputs should have labels to make it clear The right side of the div should contain 5 p>'s which reference the corresponding dinner model attributes. The 's should also have some type of label to make it clear. (hint, you may need to use nested divs to get the layout correct) The 's should automatically update, in real-time as text is input into th e corresponding input-fields g. Include a submit button. Attach an Angular function called submitDinner Upon submitting, the currently defined "Dinner" object should be pushed nto the Dinners" array You must validate that the new "Dinner" object prior to pushing the object into the array. Every attribute is required. That is, none of them can be blank. If that is the case, alert to the user that this requirement must be satisfied The "Dinners" array should be printed in the console upon every click of submit.

Explanation / Answer

According to the question, First create a new HTML Page. Then follow the below procedure,
Add your script and angularjs reference script file in script folder.
Then add the reference in your HTML page.
<script src="~/Scripts/angular.min.js"></script> // For Angular Js
<script src="~/Scripts/jquery-3.1.1.js"></script> // For Jquery
<script src="~/Scripts/jquery-3.1.1.min.js"></script> // For Jquery

Then write HTML Code. IN angularJS You have to mention ng-controller and ng-app name.

Here the Controller is "Dinnercontroller" and app name is "myApp".
Follow the below HTML Code:

<div ng-app="myApp">
<div ng-controller="Dinnercontroller">
<h2>Dinner</h2>
<div>
<div>
<div>
<input type="text" ng-model="dinners.appetizer" placeholder="appetizer" id="txtappetizer" />
</div>
<div>
<input type="text" ng-model="dinners.mainCourse" placeholder="mainCourse" id="txtmainCourse" />
</div>
<div>
<input type="text" ng-model="dinners.side1" id="txtside1" placeholder="side1" />
</div>
<div>
<input type="text" ng-model="dinners.side2" id="txtside2" placeholder="side2" />
</div>
<div>
<input type="text" ng-model="dinners.Dessert" placeholder="Dessert" id="txtDessert" />
</div>
<div>
<input type="submit" data-ng-click="InsertData(dinners)" />
</div>
</div>
<div>
<table>

<tr data-ng-repeat="y in dinners" >
<td>
<p>appetizer :
<label>{{y.appetizer}}</label></p>
<p>mainCourse :
<label>{{y.mainCourse}}</label></p>
<p>side1 :
<label>{{y.side1}}</label></p>
<p>side2 :
<label>{{y.side2}}</label></p>
<p>Dessert :
<label>{{y.Dessert}}</label></p>
</td>
</tr>
</table>

</div>
</div>
</div>
</div>

Here "dinners" is the array object and it contain the attributes name.

Write script for to get and push dinners attributes using angularjs...
Follow the below script,
<script>
var app = angular.module("myApp", []);
app.controller("Dinnercontroller", function ($scope, $http) {
debugger;
$scope.dinners = [];
  
$scope.InsertData = function (y) {

//For Validation of all input Fields
if ($scope.dinners.appetizer == "") {
alert("Enter appetizer");
return false;
}
if ($scope.dinners.mainCourse == "") {
alert("Enter mainCourse");
return false;
}
if ($scope.dinners.side1 == "") {
alert("Enter side1");
return false;
}
if ($scope.dinners.side2 == "") {
alert("Enter side2");
return false;
}
if ($scope.dinners.Dessert == "") {
alert("Enter Dessert");
return false;
}
//Push all attribute data
$scope.dinners.push({
appetizer: $scope.dinner.appetizer,
mainCourse: $scope.dinner.mainCourse,
side1: $scope.dinner.side1,
side2: $scope.dinner.side2,
Dessert: $scope.dinner.Dessert
})
alert('Saved Successfully');
$scope.dinners.appetizer = "";
$scope.dinners.mainCourse = "";
$scope.dinners.side1 = "";
$scope.dinners.side2 = "";
$scope.dinners.Dessert = "";
  
}
})
</script>

Here $scope.dinners.push({}) means dinners is an object and in this object we push the input field data.
And
$scope.dinners.appetizer = "";
$scope.dinners.mainCourse = "";
$scope.dinners.side1 = "";
$scope.dinners.side2 = "";
$scope.dinners.Dessert = "";
means the model attributes values cleared after submit.

Related Questions

Navigate

• Browse (All)
• Browse L
• Subjects

---

---

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.