Develop Reference

Why does't this toggle and filter not work in Vue JS?

I have created a v-for directive and I am now trying to add a dropdown filter in order to filter the results displayed. However, it's just not working. I have followed every step carefully as this is based on a Treehouse tutorial, but for some reason when changing the dropdown nothing displays. Seems the name property value is not being set to the object. Every time a new option is chosen it should fire the function filterList.
const clubs = [
{
name: 'Tigers',
location: 'Manchester',
members: '22',
registered: 'No',
pitch: 'Grass'
},
{
name: 'Dolphins',
location: 'Miami',
members: '19',
registered: 'Yes',
pitch: 'Grass'
},
{
name: 'Bleu Sox',
location: 'Paris',
members: '13',
registered: 'Yes',
pitch: 'Astroturf'
}
];
const app = new Vue({
el: '#app',
data: {
clubs,
name: ''
},
methods: {
toggleDetails: function(club) {
this.$set(club, 'showDetails', !club.showDetails)
},
filterList: function() {
this.name = event.target.value;
console.log(this.name);
}
}
});
My HTML is as follows;
<div id="app">
<select v-on:change="filterList">
<option v-for="club in clubs">{{club.name}}</option>
</select>
<ul>
<li v-show="name === club.name" v-for="club in clubs" v-on:click="toggleDetails(club)">
<h1>{{club.name}}</h1>
<div v-show="club.showDetails">
<p>{{club.location}}</p>
<p>{{club.members}}</p>
</div>
</li>
</ul>
</div>

You don't need to access DOM events for this - Vue is reactive and will update name when this is changed:
<select v-model="name">
<option v-for="club in clubs">{{club.name}}</option>
</select>

AngularJS - Multiple select with setting default value of select dynamically

Code for each product and it's catalogue information in drop down individually using AngularJS:
<ul style="height:250px;" >
<li data-ng-repeat="product in products" >
<div> {{SelectedOption.Price}} </div>
<select data-ng-model="SelectedOption" data-ng-init="SelectedOption=Catalogues[0]" data-ng-options="Catalogue as Catalogue.CName for Catalogue in Catalogues | filter:{ProductId:product.ProductId}:true" >
</select>
</li>
</ul>
Controller code is like this
var app = angular.module('myApp', []);
app.controller('myControl', function ($scope) {
$scope.products = [{ productname: 'Rice1', ProductId: 1}, { productname: 'Rice2', ProductId: 2 },{ productname: 'Rice3', ProductId: 3 }];
$scope.Catalogues = [{ ProductId: 1, CatalogueId: 1, CName: '25KG Bag', Price: 500, sortorder: 1 }, { ProductId: 1, CatalogueId: 2, CName: '50KG Bag', Price: 1000, sortorder: 2 },{ ProductId: 2, CatalogueId: 3, CName: '100KG Bag', Price: 1800, sortorder: 2 }];
Now want to set the default value of the each product catalogue.cname dynamically with the first value of the select drop down, Any idea? Much appreciated!
http://plnkr.co/edit/9MYrj1YJt7HzLR9FGDqD?p=preview
Plnkr result want to set for second drop down also with "100KG Bag"

To set the default value in the select, you need to set the ng-model as the first in the list you are using. Put this at the end of the controller:
$scope.SelectedOption = $scope.Catalogues[0];

I can not show the value in angular select

This is the code HTML:
<div ng-controller="SelectCtrl">
<p>selected item is : {{selectedItem}}</p>
<p> age of selected item is : {{selectedItem.age}} </p>
<select ng-model="selectedItem" ng-options="item.name for item in items">
</select>
</div>
This is the code JavaScript:
var app = angular.module('myApp', []);
app.controller('SelectCtrl', function($scope) {
$scope.items = [{name: 'one', age: 30 },{ name: 'two', age: 27 },{ name: 'three', age: 50 }];
console.log($scope.selectedItem); //this is undefined :(
});
I want to show the selected value in the controller, but apparently it is undefined.
what is the correct way?

#JoshLeeDucks is correct. $scope.selectedItem is not defined on the scope when you are attempting to log its value. When the user assigns the property a value by selecting an element in the <select> input Angular will recognise that selectedItem is not defined and create it.
Log the value using a $watch:
console.log($scope.selectedItem); // undefined
$scope.selectedItem = 'someDefaultValue';
console.log($scope.selectedItem); // 'someDefaultValue'
$scope.$watch('selectedItem', function(newValue) {
console.log(newValue); // whatever `item.name` the user has selected
});

If you want to show the selectedItem in UI or using console.log when page loading. you should initialize the selectedItem value in your controller.
Like:
var app = angular.module('myApp', []);
app.controller('SelectCtrl', function($scope) {
$scope.items = [{name: 'one', age: 30 },{ name: 'two', age: 27 },{ name: 'three', age: 50 }];
$scope.selectedItem = $scope.items[0];
console.log($scope.selectedItem); //this is {name: 'one', age: 30 } :(
});

Angularjs Dropdown OnChange Selected Text and Value

I am new to AngularJS and trying to get Selected Text and Value from Dropdown. I followed a lot of tutorials with still unable to get there. SelectedValue and SelectedText are always undefined. Below is my code:
Html:
<div ng-app="SelectApp">
<div ng-controller="selectController">
<select name="category-group" id="categoryGroup" class="form-control" ng-model="itemSelected" ng-change="onCategoryChange(itemSelected)">
<option value="0">Select a category...</option>
<option ng-repeat="category in categories" value="{{category.id}}"
ng-disabled="category.disabled" ng-class="{'mainCategory' : category.disabled}">
{{category.name}}
</option>
</select>
</div>
Js:
'use strict';
var app = angular.module('SelectApp', [ ]);
app.controller('selectController', ['$scope', '$window', function ($scope, $window) {
$scope.categories = [
{ id: 1, name: "- Vehicles -", disabled: true },
{ id: 2, name: "Cars" },
{ id: 3, name: "Commercial vehicles", disabled: false },
{ id: 4, name: "Motorcycles", disabled: false },
{ id: 5, name: "Car & Motorcycle Equipment", disabled: false },
{ id: 6, name: "Boats", disabled: false },
{ id: 7, name: "Other Vehicles", disabled: false },
{ id: 8, name: "- House and Children -", disabled: true },
{ id: 9, name: "Appliances", disabled: false },
{ id: 10, name: "Inside", disabled: false },
{ id: 11, name: "Games and Clothing", disabled: false },
{ id: 12, name: "Garden", disabled: false }
];
$scope.onCategoryChange = function () {
$window.alert("Selected Value: " + $scope.itemSelected.id + "\nSelected Text: " + $scope.itemSelected.name);
};
}]);
And one more thing, I have defined my first item as Select a category... then Why first item in Dropdown is always empty.
Below is my fiddle sample.
http://jsfiddle.net/Qgmz7/136/

That's because, your model itemSelected captures the current value of your select drop down which is nothing but the value attribute of your option element. You have
<option ng-repeat="category in categories" value="{{category.id}}">
in your code, so in the rendered version, you'll get
<option ng-repeat="category in categories" value="0">
but you're expecting itemSelected to be your category object and any attempt to query id or other property will return undefined.
You can use ng-options with group by with little bit of change to your data or you can use normal ng-repeat, get the selectedIndex and lookup the category object from your categories list using that index. Showcasing the first approach here.
HTML
<select name="category-group" id="categoryGroup"
ng-model="itemSelected" ng-change="onCategoryChange(itemSelected)"
ng-options="category.name group by category.group for category in categories">
</select>
Updated Data
$scope.categories = [
{ id: 0, name: "Select a category..."},
{ id: 1, name: "Cars", group : "- Vehicles -" },
{ id: 2, name: "Commercial vehicles", group : "- Vehicles -" },
{ id: 3, name: "Motorcycles", group : "- Vehicles -" }
];
$scope.itemSelected = $scope.categories[0];
Instead of disabled property, you can add a group property which can be used in group by.
Here' an updated Fiddle to illustrate the idea.

You should use ng-options to set object to your ng-model value on change of you select options.
Markup
<select name="category-group" id="categoryGroup" class="form-control"
ng-model="itemSelected" ng-change="onCategoryChange(itemSelected)"
ng-options="category.name for category in categories">
<option value="0">Select a category...</option>
</select>
Fiddle Here
Update
For persisting style you have to use ng-repeat there, in that case you will only have id binded to your ng-model and while retrieving whole object you need to filter your data.
$scope.onCategoryChange = function () {
var currentSelected = $filter('filter')($scope.categories, {id: $scope.itemSelected})[0]
$window.alert("Selected Value: " + currentSelected.id + "\nSelected Text: " + currentSelected.name);
};
Updated Fiddle

<div ng-app="SelectApp">
<div ng-controller="selectController">
<select ng-change='onCategoryChange()' ng-model="itemSelected" ng-options="category.name for category in categories">
<option value="">-- category --</option>
</select>
</div>
//http://jsbin.com/zajipe/edit?html,js,output

A little change in your onCategoryChange() should work:
$scope.onCategoryChange = function () {
$window.alert("Selected Value: " + $scope.categories[$scope.itemSelected - 1].id + "\nSelected Text: " + $scope.categories[$scope.itemSelected -1].name);
};
JSFiddle: http://jsfiddle.net/Qgmz7/144/

ngChange only returns the value of your selected option and that's why you don't get the whole data.
Here's a working solution without changing your markup logic.
Markup:
<select
name="category-group"
id="categoryGroup"
class="form-control"
ng-model="id"
ng-change="onCategoryChange(id)">
ngChange handler:
$scope.onCategoryChange = function (id) {
//get selected item data from categories
var selectedIndex = $scope.categories.map(function(obj) { return obj.id; }).indexOf( parseInt(id) );
var itemSelected = $scope.categories[selectedIndex];
$window.alert("Selected Value: " + itemSelected.id + "\nSelected Text: " + itemSelected.name);
};
Another solution (little bit dirty) would be to change only the value of your options into something like this:
<option .... value="{{category.id}}|{{category.name}}">
...and inside your actual ngChange handler, just split the value to get all the values as an array:
$scope.onCategoryChange = function (itemSelected) {
$scope.itemSelected = itemSelected.split('|'); //string value to array
$window.alert("Selected Value: " + $scope.itemSelected[0] + "\nSelected Text: " + $scope.itemSelected[1]);
};

Here very Simple and easy code What I did
<div ng-app="myApp" ng-controller="myCtrl">
Select Person:
<select ng-model="selectedData">
<option ng-repeat="person in persons" value={{person.age}}>
{{person.name}}
</option>
</select>
<div ng-bind="selectedData">AGE:</DIV>
<br>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',myCtrlFn);
function myCtrlFn($scope) {
$scope.persons =[
{'name': 'Prabu','age': 20},
{'name': 'Ram','age': 24},
{'name': 'S','age': 14},
{'name': 'P','age': 15}
];
}
</script>

Using angularjs filter and _.groupBy

Here's a simple example I created to replicate my issue. In my controller, I have an array of people:
$scope.people = [
{ name: 'fred', age: 20 },
{ name: 'bob', age: 22 },
{ name: 'jane', age: 24 },
{ name: 'mary', age: 22 },
{ name: 'ben', age: 24 },
{ name: 'sarah', age: 21 },
];
I have a filter defined:
.filter('grouped', function () {
return function (input) {
return _.groupBy(input, 'age');
}
})
You may notice that I'm using Lo-Dash to do the group by.
In my view I have a list defined:
<div class="list" ng-repeat="personGroup in people | grouped">
{{ $index }}
<div class="list" ng-repeat="person in personGroup">
{{ person.name }}
</div>
</div>
I get the result I'm after but I get a heap of errors in my developer console.
https://docs.angularjs.org/error/$rootScope/infdig?p0=10
I understand why I'm getting the error. This is explained in detail in the above link. I just don't know the proper way of achieving the result I'm after.

As you are creating new Array-objects when grouping the people, I would not use a filter at all. The easiest solution would be to do the grouping inside your controller:
...
$scope.groups = _.groupBy($scope.people, 'age');
...
Your ng-repeat attribute would then read like:
ng-repeat="personGroup in groups"

What version of angular are you using? I'm not getting any error:
http://plnkr.co/edit/bbDGjHWMGZx5GmNcggaw?p=preview