<!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.
Related
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>
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>
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';
};
i am new to angular js. i write the code for perform multiple controller concept but it is not working .i dont know where i am doing wrong?
following code i am using
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<input type="number" ng-model="q">
<input type="number" ng-model="c">
<p>{{ q*c }}</p>
</div>
<div ng-controller="newone">
<p>{{lastName|uppercase}}</p>
</div>
</body>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope)
{
$scope.q=10;
$scope.c=5;
});
</script>
<script src="control.js"></script>
</html>
**control.js**
var app=angular.module('myApp',[]);
app.controller('newone',function($scope){
alert();
$scope.firstName="Vinoth";
$scope.lastName="Kumar";
$scope.full=function()
{
return $scope.firstName+''+$scope.lastName;
}
});
above code is not working can any one help me to fix this
In controller.js you don't need to declare the module again :)
var app=angular.module('myApp',[]);
change it to var app=angular.module('myApp');
Consider the following code - it uses ng-bind to print the 2 models in an expression defined at the element level.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example16-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-sanitize.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="ngBindHtmlExample">
<div ng-controller="ngBindHtmlCtrl">
<input type="text" ng-model='asd'/>
<input type="text" ng-model='asdasd'/><br>
<span ng-bind='asd +" "+ asdasd'> </span>
<p ng-bind-html="myHTML"></p>
</div>
</body>
</html>
now consider this code with ng-template which does exactly the same but only uses {{ }} in the expression
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example15-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>
</head>
<body ng-app="">
<script>
function Ctrl($scope) {
$scope.salutation = 'Hello';
$scope.name = 'World';
}
</script>
<div ng-controller="Ctrl">
Salutation: <input type="text" ng-model="salutation"><br>
Name: <input type="text" ng-model="name"><br>
<pre ng-bind-template="{{salutation}} {{name}}!"></pre>
</div>
</body>
</html>
What is the key purpose of the 2 directives and best practices for their cases ?
The difference between the two has been neatly discussed here.
In short you can't use ng-bind to bind multiple values to a single html element. But you can use ng-bind-template to do that. Of course you can make ng-bind work like ng-bind-template as you have done in the question. The main difference being the execution of multiple expressions. Also ng-bind is faster and since there is rarely any need to use multiple expressions, using ng-bind would be preferable.