http://plnkr.co/edit/knmWulxhKdeQoMVm7u4k?p=preview
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-static-select-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="staticSelect">
<select name="quarter" ng-model="Quarter">
<option ng-repeat="v in [1,2,3,4]" ng-selected="v==4">Q{{v}}</option>
</select>
<select name="quarter" ng-model="Quarter">
<option ng-repeat="v in [1,2,3,4]" value="{{v}}" ng-selected="v==3">Q{{v}}</option>
</select>
</body>
</html>
ng-selected seems to be only selecting the last element. Why is this?
I have inspected the element and the ng-selected tag is true. However, if it is not the last element then it won't be selected initially.
you can try this code,
<select name="quarter" ng-model="Quarter" ng-options="item as 'Q'+item for item in [1,2,4,3]">
in your controller you have to specify "Quarter", like :
$scope.Quarter = 3
Here is a full example:
(function(angular) {
'use strict';
angular.module('staticSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
singleSelect: null,
multipleSelect: [],
option1: 'option-1',
};
$scope.Quarter = 3;
$scope.forceUnknownOption = function() {
$scope.data.singleSelect = 'nonsense';
};
}]);
})(window.angular);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-static-select-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
</head>
<body ng-app="staticSelect" ng-controller="ExampleController">
<select name="quarter" ng-model="Quarter" ng-options="item as 'Q'+item for item in [1,2,3,4]">
</body>
</html>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<title>Document</title>
</head>
<body ng-app="myApp" ng-controller="mc1">
<label class="control-label">Semester:</label>
<select ng-model="selectedSemesters" ng-change="selectedSemesterChanged()" class="form-control">
<option value="{{v.SemesterId}}" ng-repeat="v in semesters">{{v.SemesterId}}</option>
</select>
<script>
var app=angular.module('myApp',[]);
app.controller('mc1',function($scope)
{
$scope.semesters='[{"SemesterId":"Fall 2017"},{"SemesterId":"Spring 2017"}]';
})
</script>
</body>
</html>
When I run this page, I get the error error: [ngRepeat:dupes]. I tried to add track by $index but it totally doesn't work.
Can anyone tell me the reason?
Edit: Sorry I didn't explain clear. I use library in C# to convert a datatable object to json string. Then pass this to the web page through web api. In the script, I use angular.jsonFrom(response.data).
And response in browser is "[{\"SemesterId\":\"Fall 2017\"},{\"SemesterId\":\"Spring 2017\"}]". I have fixed the bug but I don't know why.
Thanks all. PS. Correct answer is followed.
<body ng-app="mySelect" ng-controller="myCt">
<select ng-model="mySelected1">
<option ng-repeat="x in data1">{{x.SemesterId}}</option>
</select>
<select ng-model="mySelected2" ng-options="x.SemesterId for x in data1">{{x.SemesterId}}</select>
<label ng-model="data1"></label>
<script>
var app = angular.module('mySelect', []);
app.controller('myCt', ['$scope', function ($scope) {
$scope.data1=angular.fromJson('[{\"SemesterId\":\"Fall 2017\"},{\"SemesterId\":\"Spring 2017\"}]');
}]);
</script>
</body>
You are passing string instead of array. So ng-repeat shows error when iterating.
Change below line;
$scope.semesters='[{"SemesterId":"Fall 2017"},{"SemesterId":"Spring 2017"}]';
To
$scope.semesters=[{"SemesterId":"Fall 2017"},{"SemesterId":"Spring 2017"}];
JSFiddle Demo
Please see this Plunkr working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<title>Document</title>
</head>
<body ng-app="myApp" ng-controller="mc1">
<label class="control-label">Semester:</label>
<select ng-model="selectedSemesters" ng-change="selectedSemesterChanged()" class="form-control">
<option value="v.SemesterId" ng-repeat="v in semesters track by $index">{{v.SemesterId}}</option>
</select>
<script>
var app=angular.module('myApp',[]);
app.controller('mc1',function($scope)
{
$scope.semesters=[{"SemesterId":"Fall 2017"},{"SemesterId":"Spring 2017"}];
})
</script>
</body>
</html>
https://jsbin.com/fuvihatihi/1/edit?html,output
There was nothing to repeat in your semester variable, because there was quotes around array declaration.
I am using Angular Js v1.6.1. I used following code to generate select list
<select class="form-control" ng-model="selectedLocation">
<option ng-repeat="item in locations" value="{{item}}">
{{item}}
</option>
</select>
In Google chrome I am getting results as excepted as shown in image below.
But in firefox, I got the following results
There is blank after select location in firefox. How to resolve this issue?
Location Object:
Bootstrap Version: 3.3.7
FireFox version: 51.0.1 (32-bit)
It is not recommended way to use ng-repeat in options if you want to generate options dynamically.
Try ng-options instead.
Can you check the below and let me know if the problem still persist ?.
(function() {
'use strict';
angular.module('myApp', []);
angular.module('myApp').controller('MainCtrl', ['$scope',
function($scope) {
$scope.locations = ['Farm1', 'Farm2', 'All'];
}
]);
}());
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body class="container" ng-controller="MainCtrl">
<div>Select Item</div>
<select class="form-control" ng-init="selectedLocation= locations[0]" ng-model="selectedLocation" ng-options="item as item for item in locations" style="width:150px">
</select>
<div>Selected item: {{selectedLocation}}</div>
</body>
</html>
Here I used same version but I don't have any problem . plunker here and image here
// Code goes here
var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
$scope.locations = ['Farm1', 'Farm2', 'All'];
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="jquery#2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script data-require="angular.js#1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body class="container" ng-controller="MainCtrl">
<div>Select Item</div>
<select class="form-control" ng-model="selectedLocation">
<option ng-repeat="item in locations" value="{{item}}">
{{item}}
</option>
</select>
<div>Selected item: {{selectedLocation}}</div>
</body>
</html>
Question :The following ng-option code is not working i not able to identify error
Code:
<html>
<head>
<title>
This is example of ng-option
</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var ngOption = angular.module("ngOptionApp",[]);
ngOption.controller("ngOptionController",function($scope){
$scope.data = ["Maharashtra","Panjab","Rajsathan","Gujrat","Karnatakka","Kerala"];
});
</script>
</head>
<body ng-app = "ngOptionApp" ng-controller = "ngOptionController">
<select ng-model = "xyz" ng-option = "x for x in data">
</select>
</body>
</html>
ng-option should be ng-options
<html>
<head>
<title>
This is example of ng-option
</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var ngOption = angular.module("ngOptionApp", []);
ngOption.controller("ngOptionController", function($scope) {
$scope.data = ["Tamil Nadu","Maharashtra", "Panjab", "Rajsathan", "Gujrat", "Karnatakka", "Kerala"];
});
</script>
</head>
<body ng-app="ngOptionApp" ng-controller="ngOptionController">
<select ng-model="xyz" ng-options="x for x in data">
</select>
</body>
</html>
Trying to do simple thing in AngularJS: form->if you put right word->button appears->u can click and go to a different page;(i didn;t try to put a link to the button since it doesn;t appear even without a link)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<input type="text" ng-model="MyCtrl.pass">
<div class="button" ng-show="kPass">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
and the js
angular.module('myApp', [])
.controller('MyCtrl', MyCtrl)
function MyCtrl($scope){
$scope.kPass = false;
$scope.pass = "empty";
$scope.$watch($scope.pass,function(){
if($scope.pass == "parola"){
$scope.kPass = !$scope.kPass;
}
})
};
problem: if i type in parola, the button does not appear
i am new to java script. thanks !
You should first read some angular tutorials, you have totaly wrong access to scope and you are using wrong $watch
angular.module('myApp', [])
.controller('MyCtrl', MyCtrl)
function MyCtrl($scope){
$scope.kPass = false;
$scope.pass = "empty";
$scope.$watch('pass',function(){
if($scope.pass == "parola"){
$scope.kPass = !$scope.Kpass;
}
})
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<div>
<input type="text" ng-model="pass">
<div class="button" ng-show="kPass">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
And next thing, you are overkilling your code. You can inline it in template without any controller function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp">
<div >
<input type="text" ng-model="pass">
<div class="button" ng-show="pass == 'parola' ">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
angular.module('app',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
Please input : 'parola' <input type="text" ng-model="pass">
<button ng-show="pass == 'parola'">Next step</button>
</body>
There are several errors here.
First, the password field is bound to MyCtrl.pass. But you're watching the value of $scope.pass
Second, $scope.$watch expects an angular expression to evaluate as argument, not a value to watch. So watching the string 'MyCtrl.pass' would be the correct thing to do.
Third, you shouldn't use a watch at all. You should just use ng-show="isPasswordValid(pass)"(see below), and return true or false from this function.
Fourth, instead of doing $scope.kPass = ($scope.pass == "parola"), you're inverting the value of $scope.kPass, but only if the value is correct. So if it goes from incorrect to correct, kPass will become true. Then if it becomes incorrect, kPass will stay true. And if it becomes correct again, it will become false.
So, to resume, all you need is
<div ng-controller="MyCtrl">
<input type="text" ng-model="pass">
<div class="button" ng-show="isPasswordValid(pass)">click me</div>
</div>
and
$scope.isPasswordValid = function(password) {
return pass === 'parola';
};
my code my controller:
App.controller('TestCtrl', function ($scope, $http) {
console.log("CTRL STARTED");
if (angular.isDefined($scope.test)) <--------------- ERROR
{
alert('UNDEFINITA');
LoadDefault();
};
My HTML
<select class="form-control" ng-options="people.id as people.name for people in peoples" ng-model="test" ng-change="LoadAnotherSelect()">
<option value="">Seleziona azienda...</option>
</select>
How to know if test variable is undefined????
Thank's in advanced
your code seems fine,
what error are you getting?
as you can see, this code works, using angular.isDefined($scope.name):
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
if (angular.isDefined($scope.name)) {
alert($scope.name);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
</body>
</html>