CODEWITHSUNDEEP
javascripthtmlangularjs
M97
M97

Reputation: 59

Angular.js dropdown that removes options when same option is selected in another dropdown

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!

Upvotes: 2

Views: 60

Answers (2)

Canet Robern
Canet Robern

Reputation: 1069

I've made a fiddle based on your code using Angular1.

<div ng-app="MyApp">

I would like to recommend using 'ng-app' instead of 'ng:app' if you can use Angular1.

You can see your code works well by referring to my fiddle. :)

And can get more information about 'ng-app' by this link. (document of angularjs-ngApp directive)

Upvotes: 1

qntm
qntm

Reputation: 4407

You forgot to load AngularJS in your HTML. Put this just below the favicon <link>:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

Completely forgivable, it took me an embarrassing amount of time to spot the mistake myself!

Upvotes: 0

Related Questions