Here is a simple form which uses AngularJS.
In FireFox (30.0) and IE (11.0.9600.17207), if I choose "Yes, No, No" in drop-down boxed, is shows "true, false, false" as I expect.
In Chrome (36.0.1985.125 m) it shows "true, true, true".
Does anybody have any ideas what I'm doing wrong?
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="testApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
var testApp = angular.module( 'testApp', [] );
testApp.controller( 'Ctl1', [
'$scope',
function ( $scope ) {
$scope.questions = [{ id: 1, value: null }, { id: 2, value: null }, { id: 3, value: null }];
$scope.submit = function () {
var results = [];
angular.forEach( $scope.questions, function ( v, k ) { results.push( v.value ); } );
console.log( results );
$scope.results = results;
}
}] );
</script>
</head>
<body>
<div ng-controller="Ctl1">
<h1>Page 1</h1>
<form ng-submit="submit()">
<p ng-repeat="item in questions">
<select ng-model="item.value">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</p>
<p>
<button type="submit">Submit</button>
</p>
</form>
<h1>Page 2</h1>
<p ng-repeat="item in results track by $index">{{ item }}</p>
</div>
</body>
</html>
Try to look at it in a binding sense and it's much easier to see what's going on.
Fiddle
{{questions}}
I was able to simplify the example and found a workaround.
Here is the simplified code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="testApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
var testApp = angular.module( 'testApp', [] );
testApp.controller( 'Ctl1', [
'$scope',
function ( $scope ) {
$scope.value = null;
}] );
</script>
</head>
<body>
<div ng-controller="Ctl1">
<p>Value: {{ value }}</p>
<select ng-model="value">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
</body>
</html>
Steps to reproduce:
Open the page in Google Chrome
Navigate to the drop-down list using keyboard
Press "arrow down" twice
Live demo: http://jsfiddle.net/QBjkB/
To fix it I’ve initialized "value" with empty string:
function ( $scope ) {
$scope.value = '';
}
And added the option with empty value to a drop-down list:
<select ng-model="value">
<option value="">---</option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
Thank you guys for your ideas!
Related
I'm creating a button to check all checkboxes. The problem is that my "all check" button doesn't work to check off all checkboxes when I click the button.
How can I do this?
angular.module('myapp', [])
.controller('MainController', ['$scope', function($scope) {
$scope.allcheck = function(){
angular.forEach($scope.checkboxes, function(item){
item.selected = event.target.checked;
});
};
}]);
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="myscript.js"></script>
</head>
<body>
<h1>AngularJS</h1>
<div ng-controller="MainController">
<button ng-click="allcheck()">all check</button>
<input type="checkbox">a
<input type="checkbox">b
<input type="checkbox">c
</div>
</body>
</html>
When you start with Angular you should think and do in angular.
First you define your model:
$scope.selected = [false, false, false];
Then you render your model into view, using repeat. (I don't remember the syntax)
<div ng-repeat="item in selected">
<input type="checkbox" ng-model="item" />
</div>
Then you implement check all by just simply changing the model.
$scope.checkAll = function() {
for (var i = 0; i < $scope.selected.length; i++) {
$scope.selected[i] = true;
}
}
Don't think like you are working with JQuery, think like MVC.
I'm pretty new into angular and already got my first problem. I looked for a solution on stackoverflow but no one got the same scenario as me. I want to set a default text in my "select box". Just something like "Choose your car". But I don't know how to insert this default text. I tried to solve it in the way i learned it in HTML. But it didn't work because I don't have any tags.
p.s. I also tried a little bit of MVC. I think it isn't correct at all, but ignore it for this post.
That would be my code:
View -> index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedCar" ng-options="x.marke for x in cars">
</select>
<h1>You selected: {{selectedCar.marke}}</h1>
<h1>The color is: {{selectedCar.farbe}}</h1>
</div>
<script src="./JS/myApp.js"></script>
<script src="./JS/myCtrl.js"></script>
</body>
</html>
Model -> myApp.js
var app = angular.module("myApp", []);
Controll -> myCtrl.js
app.controller("myCtrl", function($scope){
$scope.cars = [
{marke: "Lamborghini", farbe: "Gelb"},
{marke: "Bugatti", farbe: "Schwarz"},
{marke: "BMW", farbe: "Blau"},
{marke: "VW", farbe: "Grau"}
];
})
Thanks for any help
Just add another option like below,
<select ng-model="selectedCar" ng-options="x.marke for x in cars">
<option value="">-- Choose your car --</option>
</select>
DEMO
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
$scope.cars = [
{marke: "Lamborghini", farbe: "Gelb"},
{marke: "Bugatti", farbe: "Schwarz"},
{marke: "BMW", farbe: "Blau"},
{marke: "VW", farbe: "Grau"}
];
})
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedCar" ng-options="x.marke for x in cars">
<option value="">-- Choose your car --</option>
</select>
<h1>You selected: {{selectedCar.marke}}</h1>
<h1>The color is: {{selectedCar.farbe}}</h1>
</div>
</body>
</html>
You can manually add an default option like so:
<select ng-model="selectedCar" ng-options="x.marke for x in cars">
<option value="">Please select one</option>
</select>
I wanna get selected item in Ionic checkboxes. So, when user checks checkbox(es), I wanna know which book(s) he/she has selected.
Here are my code snippets:
<ion-item ng-repeat="book in data.books">
<div style="margin-left:110px;margin-right:10px;">
{{book.name}}
</div>
<li class="item item-checkbox checkbox-balanced">
<label class="checkbox">
<input type="checkbox">
</label>
</li>
</ion-item>
When run the code, it looks like this:
I wanna use ng-model but I do not know how to use it. Can someone help me please as I am new to Ionic and AngularJS, THANKS!
UPDATE:
I am extremely sorry that I did not provide the controller's code snippet, here are the codes:
.controller('DetailsCtrl', function ($scope, $http) {
$http.get("") // some webservice url
.then(function (response) {
$scope.data = response.data;
});
});
You can have a variable for checked in each value and bind that as a model variable to the check box
DEMO
var clubApp = angular.module('clubApp', ['ionic'])
clubApp.controller('ctrlPlayer', ['$scope', function($scope) {
$scope.books = [{
"name": "And the goog news is",
"checked": false
}, {
"name": "Girl on the train",
"checked": false
}];
$scope.getselected = function(){
angular.forEach($scope.books,function(key,value){
if(key.checked ==true)
{
alert(key.name);
}
});
}
}]);
<!DOCTYPE html>
<html ng-app='clubApp'>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="//code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">
<script src="//code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="ctrlPlayer">
<ion-list>
<ion-checkbox ng-model=value.checked ng-repeat="(key, value) in books">
<span>{{value.name}}</span>
</ion-checkbox>
</ion-list>
<button ng-click="getselected()" class="button button-positive">
get selected
</button>
<h1>{{selectedval}}</h1>
</body>
</html>
How to error proof JavaScript from item list by entering the same item or no item. Please help me guys of been researching for days StackOverFlow is my last hope. Any Help will be appreciated.`Thanks guys
var app = angular.module('myApp',[]);
app.controller('SportController', function($scope) {
$scope.newItem;
//List Sport
$scope.sports = ['Football', 'Basketball', 'Hockey', 'Soccer'];
//Remove Sport
$scope.addItem = function(){
$scope.sports.push($scope.newItem);
$scope.newItem = '';
}
//Remove Sport
$scope.removeItem = function(item){
var idx = $scope.sports.indexOf(item);
$scope.sports.splice(idx,1);
}
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller='SportController'>
<h1>Sport List</h1>
<div>
<form ng-submit="addItem()">
<div>
<input type="text" ng-model="newItem" placeholder"Add Sport"/>
<button type="submit">Save</button>
</div>
</form>
</div>
<p> {{ newItem }}</p>
<div>
<h4>Sports {{ sports.length }}</h4>
<table>
<tr ng-repeat="spor in sports">
<td>{{spor}}</td>
<td>
<button ng-click="removeItem(spor)">×</button>
</td>
</tr>
</table>
</div>
<!--End of div--->
</body>
</html>
Block the UI from being able to submit.
Or use a simple if check...
$scope.addItem = function(item){
//blank item
if(!item) return; //or display an alert
//item already exists
if($scope.sports.indexOf(item) > -1) return; //or display a different alert
$scope.sports.push(item);
$scope.newItem = null;
}
Hey guys my search filters are not working for some reason. You can check in this website! Like i dont understand why its wrong. I followed the tutorial exactly from this site. Please help!
Here is my code:
index.html:
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8" />
<title>Basic Login Form</title>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src = "https://rawgit.com/nirus/Angular-Route-Injector/master/dist/routeInjector.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-app = "app">
<div ng-controller = "people">
<ul>
<h2>Names And Ages of Programmers:</h2>
<li ng-repeat = "person in persons | filter: searchBox">
Name: {{person.Name}}<br>
Age: {{person.Age}}<br>
Favorite-Color : {{person.Fav_Color}}
</li>
</ul>
</div>
<div id = "searchBoxes">
Global Search Filter : " <input type="text" ng-model="globalSearch.$"><br>
Name Search Filter: <input type="text" ng-model = "globalSearch.Name"><br>
Age Search Filter: <input type="text" ng-model = "globalSearch.Age"><br>
Favorite Color Search Filter: <input type="text" ng-model = "globalSearch.Fav_Color"><br>
</div>
</div>
</body>
</html>
main.js:
var filex = {
"records" : [
{
"Name":"Something",
"Age":"18",
"Fav_Color" : "Orange"
},
{
"Name": "Anonymus",
"Age" : "???",
"Fav_Color" : "Blue"
}
]
}
var app = angular.module('app',[])
app.controller('people', function($scope){
$scope.persons = filex.records
})
You missed the input to which your filter is bound:
<input type="text" ng-model="searchBox">
Adding this is vital since the ng-model="searchBox" here is bound to your search results: <li ng-repeat = "person in persons | filter: searchBox"> here.
Your search results are filtered based on model searchBox.
JsBin example