<html ng-app="recipeApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="RecipeController">
<h1>Recipe Book</h1>
<div>
<label for="search">Search:</label>
<input type="text" id="search" ng-model="searchText">
</div>
<div ng-repeat="recipe in recipes | filter: searchText">
<h2>{{ recipe.name }}</h2>
<p>{{ recipe.ingredients }}</p>
<p>{{ recipe.instructions }}</p>
</div>
<script>
var app = angular.module('recipeApp', []);
app.controller('RecipeController', function ($scope) {
$scope.recipes = [
{
name: 'Pasta Carbonara',
ingredients: 'Spaghetti, eggs, Parmesan cheese, bacon, black pepper',
instructions: 'Boil spaghetti, mix eggs and cheese, cook bacon, combine all'
},
{
name: 'Chicken Stir-Fry',
ingredients: 'Chicken, vegetables, soy sauce, garlic, ginger',
instructions: 'Cook chicken, stir-fry vegetables, add sauce and seasonings'
}
];
});
</script>
</body>
</html>
No comments:
Post a Comment