I am trying to create a search on AngularJs based on the snippet I found on codepen and this is the URL http://codepen.io/netsi1964/pen/AmGcg
This is a snippet on what I have tried
<div ng-app="myApp" ng-controller="Example">
<div class="container controls">
<div class="row">
<div class="col-md-12">
<form action="" method="POST" role="form">
<legend>Find a movie from YouBio</legend>
<div class="input-group">
<input type="search" id="search" class="form-control" ng-model="search">
<div class="input-group-addon">Found {{(movies | filter:search).length}} of {{movies.length}}</div>
<div class="input-group-addon "><input type="checkbox" ng-model="reverse" value="true" id="reverse" /><label for="reverse">Reverse</label></div>
<div class="input-group-addon "><input type="checkbox" ng-model="list" value="true" id="reverse" /><label for="list">List</label></div>
</div>
</form>
</div>
</div>
</div>
This is JS file:
angular.module("myApp",["ngSanitize"])
.filter('replace', function () {
var pat = / /gi;
return function (text) {
var clean = text.replace(pat, "-");
var temp = clean.split("---");
if (temp.length>1) {
clean = temp[0];
}
return clean;
};
})
.controller("Example", function($scope, $interval) {
$scope.search = "orig";
$scope.movies = youMovie;
$scope.reverse = false;
$scope.list = false;
});
And I am getting the following the error
Uncaught Error: [$injector:modulerr]
On my Chrome Console
And here is a plunk I have made
http://plnkr.co/edit/00ghGQtBKkvEKkzlD52c?p=preview
I made some modifications and the code is working now.
HMTL markup, by the way there were lots of miskes.
<html>
<head>
<title></title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.1.0/css/ionic.min.css" rel="stylesheet">
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.1.0/js/ionic.bundle.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-sanitize.min.js"></script>
<script src="app.js"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="col-md-12">AngularJS <code>ng-repeat</code> with search</h1>
<blockquote>AngularJS lets you easily do a <em>instant search</em> if you say save your data as <code>JSON</code>. The elegant way that it is coded and the performance I find great. The <code>JSON</code> data I use, I have collected from Danish streaming TV service YouBio. I use <code>bootstrap 3</code> to control the markup/layout. <br />
<code>2014/11/14</code> Added link to watch the movie on YouSee Play (not free).</blockquote>
</div>
</div>
<div ng-app="myApp" ng-controller="Example">
<div class="container controls">
<div class="row">
<div class="col-md-12">
<form action="" method="POST" role="form">
<legend>Find a movie from YouBio</legend>
<div class="input-group">
<input type="search" id="search" class="form-control" ng-model="search">
<div class="input-group-addon">Found {{(movies | filter:search).length}} of {{movies.length}}</div>
<div class="input-group-addon "><input type="checkbox" ng-model="reverse" value="true" id="reverse" /><label for="reverse">Reverse</label></div>
<div class="input-group-addon "><input type="checkbox" ng-model="list" value="true" id="reverse" /><label for="list">List</label></div>
</div>
</form>
</div>
</div>
</div>
<div class="container result">
<div ng-class="list ? 'col-md-6' : 'col-md-4'" class="movie" ng-repeat="movie in movies | filter:search | orderBy:'title':reverse"> <a href="https://film.youseeplay.dk/search/{{movie.title}}" target="_blank">
<img ng-class="list ? 'col-md-2' : 'col-md-12'" ng-src="{{movie.src}}" alt="Click to play {{movie.title}} on YouSee Play (not free)" title="Click to play {{movie.title}} on YouSee Play (not free)" class="img-thumbnail" /></a>
<h4 ng-class="list ? 'col-md-10' : 'col-md-12'">{{movie.title}}</h4>
</div>
</div>
</div>
<body>
</html>
Controller, also you did't have and data to present in the view so I added some dummy data:
angular.module("myApp",["ngSanitize"])
.filter('replace', function () {
var pat = / /gi;
return function (text) {
var clean = text.replace(pat, "-");
var temp = clean.split("---");
if (temp.length>1) {
clean = temp[0];
}
return clean;
};
})
.controller('Example', ['$scope',
function($scope) {
$scope.$watch('search', function(newVal, oldVal) {
$scope.search = newVal;
$scope.movies = [{title: 'Movie 1'}, {title: 'Movie 2'}, {title: 'Movie 3'}, {title: 'Moive 4'}, {title: 'Movie 5'}];
$scope.reverse = false;
$scope.list = false;
});
}
]);
//document.querySelector('#search').focus();
You are injecting a module you have not loaded on the page. The ngSantize module is standalone from the angular.min.js source. You need to load angular-sanitize.min.js on the page.
you not load santize file like:
Index.html
<html>
<head>
<title></title>
</head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.1.0/css/ionic.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
//** This file add***
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-sanitize.js"></script>
<script src="app.js"></script>
<link href="style.css" rel="stylesheet">
<body>
Related
I'm doing an simple app-ToDoList with login page.the second page have a controller that update dynamically the content of my ToDoList, unfortunately when I launch my application the controller not update the page...there someone that could advice me what's wrong? maybe I'm missing something..
here the application with the code :
http://plnkr.co/edit/IIYlc1RbEeW8mn9L6YVL?p=preview
This is the page where load the contents.
<html ng-app="toDoApp" ng-controller="toDoController">
<head>
<title>Tasks App</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
<script src="app.js" type="text/javascript"></script>
<script src="ToDocontroller.js" type="text/javascript"></script>
</head>
<body>
<h1>My To-do List</h1>
<h2>Tasks</h2>
<table>
<tr><td>
<h3>Active ({{ tasks.length }})</h3>
<span ng-hide="tasks.length">You have no active tasks!</span>
<div ng-repeat="task in tasks">
<input type="checkbox" ng-click="transferTo($index, tasks, completed)" /> {{ task }}<br />
</div>
</td><td>
<div ng-show="completed.length">
<h3>Completed ({{ completed.length }})</h3>
<div ng-repeat="task in completed">
<input type="checkbox" ng-click="transferTo($index, completed, tasks)" checked /> <span class="complete">{{ task }}</span><br />
</div>
</div>
</td></tr>
</table>
<h2>Add a Task</h2>
<form ng-submit="addTask()">
<input type="text" placeholder="Description" ng-model="newTaskName" />
<input type="submit" value="Add" />
</form>
</body>
</html>
Here my controller
angular.module('toDoApp', [])
.controller('toDoController', ['$scope', function($scope) { alert('1');
$scope.tasks = ['Do the laundry'];
$scope.completed = [];alert('1');
$scope.newTaskName = '';
alert('2');
$scope.addTask = function() {
var name = $scope.newTaskName;
if (name && $scope.tasks.indexOf(name) == -1
&& $scope.completed.indexOf(name)) {
$scope.tasks.push(name);
$scope.newTaskName = '';
}
};
$scope.transferTo = function(index, start, end) {
end.push(start[index]);
start.splice(index, 1);
}
}]);
tnx in advance
So many mistakes. This is just sample. You should use $route (ng-view or ui-view) for route navigation.. I was updated plnkr.
http://embed.plnkr.co/C1ubxufRQHN4rfGooxeF/
I am trying to use Route in my newEvent page. But it's giving me 404 error. I checked my code but I am not able to identify the error.
can anyone please check my codes and let me know whats wrong im doing here. I uploaded app.js , EditEventController.js , index.html and NewEvent.html file. I also uploaded a screenshot. Please take a look and let me solve this error.
Thank you
'use strict';
var eventsApp = angular.module('eventsApp', ['ngResource', 'ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when('/newEvent', {
templateUrl: 'templates/NewEvent.html',
controller: 'EditEventController'
});
});
.factory('myCache', function ($cacheFactory) {
return $cacheFactory('myCache', {
capacity: 3
});
});
........................
'use strict';
eventsApp.controller('EditEventController',
function EditEventController($scope, eventData) {
$scope.saveEvent = function (event, newEventForm) {
if (newEventForm.$valid) {
eventData.save(event)
.$promise
.then(
function (response) {
console.log('success', response)
})
.catch(
function (response) {
console.log('failure', response)
}
);
}
};
$scope.cancelEdit = function () {
window.location = "/EventDetails.html";
};
}
);
........................
<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
<meta charset="utf-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
<script src="lib/jquery.min.js"></script>
<script src="lib/underscore-1.4.4.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="lib/angular/angular-resource.min.js"></script>
<script src="angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/EventController.js"></script>
<script src="js/controllers/EditEventController.js"></script>
<script src="js/services/EventData.js"></script>
<script src="js/filters.js"></script>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li> Create Event </li>
</ul>
</div>
</div>
<ng-view> </ng-view>
</div>
</body>
</html>
...................................
<div style="padding-left:20px; padding-right:20px">
<div class="container">
<h1> New Event</h1>
<hr />
<form name="newEventForm">
<fieldset>
<label for="eventName">Event Name: </label>
<input id="eventName" type="text" required ng-model='event.name' placeholder="Name of your event...." />
<label for="eventDate">Event Date: </label>
<input id="eventDate" type="text" required ng-pattern="/\d\d/\d\d/\d\d\d\d/" ng-model='event.date' placeholder="format (mm/dd/yyyy)...." />
<label for="eventTime">Event Time: </label>
<input id="eventTime" type="text" ng-model='event.time' placeholder="Start and end time...." />
<label for="eventLocation">Event Location: </label>
<input id="eventLocation" type="text" ng-model='event.location.address' placeholder="Address of event...." />
<br>
<input id="eventCity" type="text" ng-model='event.location.city' class="input-small" placeholder="City ...." />
<input id="eventProvince" type="text" ng-model='event.location.province' class="input-small" placeholder="Province ...." />
<label for="eventImageUrl">Image</label>
<input id="eventImageUrl" type="url" ng-model='event.imageUrl' class="input-xlarge" placeholder="Url of image ...." />
</fieldset>
<img ng-src="{{event.imageUrl}}" src="" />
<br>
<br>
<button type="submit" ng-disabled="newEventForm.$invalid" ng-click="saveEvent(event, newEventForm)" class="btn btn-primary">Save</button>
<button type="submit" ng-click="cancelEdit()" class="btn btn-primary">Cancel</button>
</form>
</div>
</div>
In your html, should this entry:
<script src="angular/angular-route.js"></script>
... be changed to this, so that it matches the location to the other angular files?
<script src="lib/angular/angular-route.js"></script>
I'm trying to follow a tutorial for MEAN stack starting with Angular and even the provided sample code won't work. The code shows instead of the data, eg. "{{created_buy}}" instead of "David". I'm new to Angular so I feel like I might be missing something obvious...
main.html:
<!--main.html-->
<html>
<head>
<title>Chirp</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="javascripts/chirpApp.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body ng-app="chirpApp">
<div id='main' class="container" ng-controller="mainController">
<div class="col-md-offset-2 col-md-8">
<div class="clearfix">
<form ng-Submit="post()">
<input required type="text" class="form-control" placeholder="Your name" ng-model="newPost.created_by" />
<textarea required class="form-control" maxlength="200" rows="3" placeholder="Say something" ng-model="newPost.text"></textarea>
<input class="btn submit-btn pull-right" type="submit" value="Chirp!" />
</form>
<div id="post-stream">
<h4>Chirp Feed</h4>
<div class="post" ng-repeat="post in posts | orderBy:'created_at':true" ng-class-odd="'odd'" ng-class-even="'even'">
<p>{{post.text}}</p>
<small>Posted by #{{post.created_by}}</small>
<small class="pull-right">{{post.created_at | date:"h:mma 'on' MMM d, y"}}</small>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
app.js:
//chirpApp.js
var app = angular.module('chirpApp', []);
app.controller('mainController', function($scope){
$scope.posts = [];
$scope.newPost = {created_by: '', text: '', created_at: ''};
$scope.post = function(){
$scope.newPost.created_at = Date.now();
$scope.posts.push($scope.newPost);
$scope.newPost = {created_by: '', text: '', created_at: ''};
};
});
You need to refer the correct js file
<script src="javascripts/chirpApp.js"></script>
but you have mentioned app.js, so it should be
<script src="javascripts/app.js"></script>
WORKING DEMO
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to change a radio button's property on a click on a <div>.
In the below code, the div has a class and I have to change the radio button's property to true if the div is clicked.
I wrote this event handling using jQuery.
Can you tell me how to solve this using Angularjs?
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
//How to write code here in Angular//
});
<!DOCTYPE html>
<html ng-app='myapp'>
<head>
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<div>
<input ng-click="Large()" id="large" type="radio" name="button">Large
<input ng-click="Medium()" id="medium" type="radio" name="button">medium
<input ng-click="Small()" id="small" type="radio" name="button">Small
</div>
<div>
<div class="col-xs-12 field">first //click</div><br/>
<div class="col-xs-6 field">second //click</div><br/>
<div class="col-xs-4 field">third //click</div>
</div>
<script>
$(document).ready(function () {
$('.field').bind('click', function () {
if ($(this).hasClass('col-xs-12')) {
$('#large').prop("checked", true);;
}
else if ($(this).hasClass('col-xs-6')) {
$('#medium').prop("checked", true);
}
else
$('#small').prop("checked", true);
})
});
</script>
</body>
</html>
(also available at https://plnkr.co/edit/PNabPp2OvYAS76p3KfsH?p=preview)
Update the model value using ng-click directive
Try this:
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.val = ''
$scope.clickHadler = function(val) {
$scope.val = val;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app='myapp' ng-controller="MainCtrl">
<div>
<input ng-click="Large()" ng-model='val' value='first' id="large" type="radio" name="button">Large
<input ng-click="Medium()" ng-model='val' value='second' id="medium" type="radio" name="button">medium
<input ng-click="Small()" ng-model='val' value='third' id="small" type="radio" name="button">Small
</div>
<div>
<div class="col-xs-12" ng-click='clickHadler("first")'>first //click</div>
<br/>
<div class="col-xs-6" ng-click='clickHadler("second")'>second //click</div>
<br/>
<div class="col-xs-4" ng-click='clickHadler("third")'>third //click</div>
</div>
</body>
Since you can't use label, the angular solution will be is to use model values
var app = angular.module('myapp', [], function() {})
app.controller('MainCtrl', function($scope) {
$scope.fieldClicked = function(size) {
if (size == 'col-xs-12') {
$scope.size = 'large';
} else if (size == 'col-xs-6') {
$scope.size = 'medium';
} else if (size == 'col-xs-4') {
$scope.size = 'small';
}
}
})
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="MainCtrl">
<div>
<input ng-model="size" value="large" type="radio" name="button">Large
<input ng-model="size" value="medium" type="radio" name="button">medium
<input ng-model="size" value="small" type="radio" name="button">Small
</div>
<div>
<!--ng-click="fieldClicked(div.size)" in template-->
<div class="col-xs-12 field" ng-click="fieldClicked('col-xs-12')">first</div>
<br/>
<div class="col-xs-6 field" ng-click="fieldClicked('col-xs-6')">second</div>
<br/>
<div class="col-xs-4 field" ng-click="fieldClicked('col-xs-4')">third</div>
</div>
</div>
</div>
No need of script here, just use label instead of div
var app = angular.module('myapp', [], function() {})
app.controller('MainCtrl', function($scope) {
})
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="MainCtrl">
<div>
<input ng-click="Large()" id="large" type="radio" name="button">Large
<input ng-click="Medium()" id="medium" type="radio" name="button">medium
<input ng-click="Small()" id="small" type="radio" name="button">Small
</div>
<div>
<label for="large" class="col-xs-12 field">first</label>
<br/>
<label for="medium" class="col-xs-6 field">second</label>
<br/>
<label for="small" class="col-xs-4 field">third</label>
</div>
</div>
</div>
I've tried to build an application that let's you input data into several fields, uses AngularJS to put data into a Firebase JSON, and outputs that data into nicely laid out "cards".
Initially I could input and output data, but as soon as I hooked it up to AngularJS and Firebase I just got '{{ 1 + 2 }}' instead of '3' in my browser.
I'm running this code on my webserver, I hope you can help me figure out what the problem is – the page is pretty much blank. Everything that depends on Angular isn't showing up.
Link to live page:
repertoire.me/anustart
Here's my code:
index.html
<html lang="en" ng-app="repertoire">
<head>
<meta charset="utf-8">
<title>Repertoire Beta</title>
<!-- STYLES -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
<!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script type="text/javascript" src="assets/js/angular.js"></script>
<script type="text/javascript" src="assets/js/angular.min.js"></script>
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/venues.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body ng-controller="VenueController as venueCtrl">
<p class="ANGULAR_TEST">1 + 2 = {{ 1 + 2 }}</p>
<header class="card">
<h1>repertoire</h1>
</header>
<venue-list></venue-list>
<venue-form></venue-form>
<footer id="info" class="card" ng-include="'footer.html'"></footer>
</body>
</html>
venue-list.html
<section class="card" id="venueList">
<h2 class="venue_name">{{venueCtrl.venue.name}}</h2>
<h3 class="venue_location">{{venueCtrl.venue.location}}</h3>
<div class="pricecat">
<span class="venue_price">{{venueCtrl.venue.price}}</span>
<span class="venue_category">{{venueCtrl.venue.species}} {{venueCtrl.venue.genre}}</span>
</div>
<p class="venue_description">{{venueCtrl.venue.description}}</p>
<p class="venue_tags">{{venueCtrl.venue.tags}}</p>
</section>
venue-form.html
<section class="card" id="venueForm">
<form name="venueForm" ng-controller="VenueController as venueCtrl" ng-submit="venueForm.$valid && venueCtrl.venueForm(info)" novalidate>
<input ng-model="venueCtrl.venue.name" type='text' class="input" id='nameInput' placeholder='Venue Name' required/>
<input ng-model="venueCtrl.venue.location" type='text' class="input" id='locationInput' placeholder='Address' required/>
<select ng-model="venueCtrl.venue.price" type='text' class="input" id='priceInput' ng-options="price for price in [$,$$,$$$,$$$$]">
<option value="">Price</option>
</select>
<input ng-model="venueCtrl.venue.genre" type='text' class="input" id='genreInput' placeholder='Category'/>
<input ng-model="venueCtrl.venue.species" type='text' class="input" id='speciesInput' placeholder='What kind?'/>
<textarea ng-model="venueCtrl.venue.description" type='text' class="input" id='descriptionInput' placeholder='Description'></textarea>
<input ng-model="venueCtrl.venue.tags" type='text' class="input" id='tagsInput' placeholder='Who did you go with?'/>
<label>Have you already been?</label>
<input ng-model="venueCtrl.venue.check" type="checkbox" checked />
<div> venueForm is {{venueForm.$valid}} </div>
<input type="submit" value="Add Venue"/>
</form>
</section>
app.js
(function() {
var app = angular.module('repertoire', ['repertoire-venues']);
//var app = new Firebase('https://xyz.firebaseio.com/');
app.controller("VenueController", ['$http', function($http){
var venue = this;
venue.info = [ ];
$http.get('venues.json').success(function(data){
venue.info = data;
});
}]);
})();
repertoire-venues.js
(function() {
var app = angular.module('repertoire-venues', []);
app.directive('venueList', function(){
return {
restrict: 'E',
templateUrl: 'venue-list.html'
};
});
app.directive('venueForm', function(){
return {
restrict: 'E',
templateUrl: 'venue-form.html'
controller: function(){
this.venue = {};
this.venueForm = function(info){
info.venues.push(this.venue);
this.venue = {};
};
},
controllerAs: 'venueCtrl'
};
});
})();
Thank you so much <3
you have included venues.js instead of repertoire-venues.js in the index page and there is a comma missing on line 14 in repertoire-venues.js