Currently learning Angular.js and to be honest struggling a lot with it... I am currently working on a simple set of dropdowns with the same options displayed. What I am trying to achieve is to ... let's say someone selects "Jane". I want it to remove "Jane" in the following dropdowns. I have the code set-up but the issue is that the options aren't showing up and nothing is really happening. I have the form in a file called index.html and the Javascript is in a file called app.js. The app is running locally with all the Angular files pulled in using npm not using a CDN.
I will display the code here on stack. Any help is appreciated and thank you in advance!
Here is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="app.js"></script>
</head>
<body>
<div ng:app>
<div ng-controller="HelloCntl">
<select ng-model="selectname1"
ng-options="item as item.name for item in friends|filter:filter2|filter:filter3" ><option value="">- select -</option></select>
<div>{{selectname1}}</div>
<select ng-model="selectname2"
ng-options="item as item.name for item in friends|filter:filter1|filter:filter3" ><option value="">- select -</option></select>
<div>{{selectname2}}</div>
<select ng-model="selectname3" ng-options="item as item.name for item in
friends|filter:filter1|filter:filter2" ><option value="">- select -</option>
</select>
<div>{{selectname3}}</div>
</div>
</div>
</body>
</html>
and the app.js code:
function HelloCntl($scope) {
$scope.selectname1={};
$scope.selectname2={};
$scope.selectname3={};
$scope.filter1 = function(item){
return (!($scope.selectname1&&$scope.selectname1.id)||item.id !=$scope.selectname1.id);
};
$scope.filter2 = function(item){
return (!($scope.selectname2&&$scope.selectname2.id)||item.id!=$scope.selectname2.id);
};
$scope.filter3 = function(item){
return (!($scope.selectname3&&$scope.selectname3.id)||item.id !=$scope.selectname3.id);
};
$scope.friends = [
{
id:1,name: 'John',
phone: '555-1276'},
{
id:2,name: 'Mary',
phone: '800-BIG-MARY'},
{
id:3,name: 'Mike',
phone: '555-4321'},
{
id:4,name: 'Adam',
phone: '555-5678'},
{
id:5,name: 'Julie',
phone: '555-8765'}
];
}
I have seen this example work in other demos but for me it just doesn't seem to be working... very curious about possible solutions. Thanks again!
