Develop Reference

Use v-for key outside of the loop

I have a simple v-for that renders a list of items inside a select box like this:
<div class="col-md-4">
<select class="form-control" v-model="tableStyle">
<option v-for="(item,key) in tableStyles">
{{ item }}
</option>
</select>
</div>
Then I have a button that should remove a specific item, the selected one. I want to access its key so I can remove it easily. How can I do that? At the moment my key is undefined. Can I use v-model for that?
<button #click="removeStyle(key)" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-remove text-danger"></span>
</button>

When an option is selected from the select element, and it has v-model binded to something (tableStyle in your case) the value attribute of the selected option element will be assigned there. So, you can bind value to the key:
<select class="form-control" v-model="tableStyle">
<option v-for="(item,key) in tableStyles" v-bind:value="key">
{{ item }}
</option>
</select>
And then you can use your tableStyle:
<button #click="removeStyle(tableStyle)" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-remove text-danger"></span>
</button>
Working example: https://jsfiddle.net/hy21um75/

I check your code and it is just incomplete. For that reason, I want to give some clarifications to improve your understanding about how a Vue instance works.
First, remember that the HTML tag select uses the option tag for each item of the tableStyles. Now, this option tag should has a value parameter and a text like in this structure:
<select>
<option value="0">Style 01</option>
...
<option value="3">Style 04</option>
</select>
Now, what we need is a way of assigning each key of the array tableStyles to each parameter value of the option tag and rendering the style name of the array tableStyles as the text of the option tag.
<option v-for="(item, key) in tableStyles" :value="key">
{{item}}
</option>
Also, do not forget about v-model directive, which creates two-way data bindings on form elements. This means, it automatically picks the correct way to update the element based on the input type. We can achieve this by adding selected to the data definition in the Vue instance creation and addingv-model="selected" to the select tag.
Ok Teocci, but why I got undefined for my parameter key called in the onClick event in the button tag?
Well that is because key only is defined inside of the v-for scope and this scope is defined by the option tag.
Then, how can I get the selected key out of the v-for scope?
Easy, just use selected that is defined in all the scope of the selector tag as shown in this snippet:
new Vue({
el: '#selector',
data: {
selected: '',
tableStyles: ['Style 01', 'Style 02', 'Style 03', 'Style 04'],
},
methods: {
removeStyle: function(key) {
this.tableStyles.splice(key, 1);
},
},
});
#selector .main{
float: left;
padding-left: 50%;
padding: 0px 0px 0px 16px !important;
border: none;
vertical-align: middle;
height: 48px;
line-height: 48px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="selector">
<div class="main">
<select class="form-control" v-model="selected">
<option v-for="(item, key) in tableStyles" :value="key">
{{ item }}
</option>
</select>
</div>
<div class="main">
<button #click="removeStyle(selected)" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-remove text-danger">Remove</span></button>
</div>
<div class="main">
<span>Selected: {{ selected }}</span>
</div>
</div>

Need to add multiple divs with same content inside a single div on a click against the parent div

Here is my piece of code, a function to add a meal template:
vm.addMealTemplate = function() {
$scope.mealCount++;
$compile( $(document.createElement('div')).attr("id", 'mealDiv' + $scope.mealCount).addClass("mealDiv"+$scope.mealCount).after().html(
'<select ng-options="(option.name ) for option in mealOptions" ng-model="selectedOption'+ $scope.mealCount+'" />' +
'<input type="text" placeholder="Meal timings" id="time'+ $scope.mealCount +'"/>' +
'<a id="mealCount" ng-class="mealCount" ng-click="addItemCategory()" uib-tooltip="Add category" tooltip-trigger="mouseenter" tooltip-placement="bottom"><i class="fa fa-plus"></i></a>'
).appendTo("#meals")
// $("#meals").append(newMealDiv)
)($scope);
}
On clicking calling the addItemCategory() for the specific div, I want another div to get added as a child of that div. There can be mutiple meal templates, and for each template I can call the addItemCategory mutliple times, and I want the category to be added to the same div for which the function has been called. How do I achieve this?
Currently I am using mealCount variable from scope to have the context, but once it gets increased, I have no way to access the divs added previously, to add the new element to that div. Any way using jQuery or AngularJs?

You can use ng-repeat
For example:
angular.module('app', []).
controller('ctrl', function($scope) {
$scope.meals = [];
});
.meal {
border:1px solid;
padding:10px;
margin-bottom:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="meal in meals" class="meal">
<select ng-model="meal.count">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type="text" placeholder="Meal timings" ng-model="meal.timing" />
<div>
<div>Categories:</div>
<div ng-repeat="cat in meal.categories track by $index">
<input type="text" ng-model="meal.categories[$index]" />
</div>
<button ng-click="meal.categories.push('')">Add Category</button>
</div>
</div>
<button ng-click="meals.push({categories:[]})">Add meal</button>
<hr />
{{meals | json}}
</div>
Note: I changed the models etc. it's just example..

Here's an example Plunker on how your problem can be solved with ng-repeat in Angular:
http://plnkr.co/edit/POt7nFc4GqFU67SWdMp7?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="restaurant" ng-controller="meal-controller">
<div ng-repeat="meal in meals track by $index">
<select ng-options="option.name for option in mealOptions" ng-model="meal.selectedMeal"></select>
<input type="text" placeholder="Meal timings" id="{{'time'+ $index }}" ng-model="meal.timing"/>
<a id="mealCount" ng-class="mealCount" ng-click="addItemCategory()" uib-tooltip="Add category" tooltip-trigger="mouseenter" tooltip-placement="bottom"><i class="fa fa-plus"></i></a>
</div>
<button ng-click="addMeal()">Add meal</button>
</body>
</html>
-
// Script.js
angular.module('restaurant', [])
.run( ['$rootScope', function( $rootScope ) {
}]
);
angular.module('restaurant').controller('meal-controller', [ '$scope', function( $scope ) {
$scope.meals = [];
$scope.mealOptions = [{ name: "option1"}, { name: "option2"}, { name: "option3" } ];
$scope.addMeal = function() {
$scope.meals.push({ selectedMeal: null, timing: "timing" });
}
$scope.addItemCategory = function() {
}
}]);
I am not entirely sure about how you want the logic to work, but I am sure that you can modify this example to fit your needs.
Ng-repeat works like a loop which prints the content it is wrapping until the end of the array. Ng-repeat has a lot of features like tracking elements in the array by index, this can used to (like in the example) give each input an unique id.
If you need to make some specific changes to a meal, you can pass it as an argument, for example if you want to delete a specific meal you can have a button inside the ng-repeat like this:
<button ng-click="deleteMeal(meal)">Delete Meal</button>
This means that you do not have to access the meal specifically by, for example, its id with jQuery.
I would say it is not recommended to mix angular and jQuery the way you are doing now. Try to stick with Angular and avoid jQuery. In some special cases where you need to do element specific modifications it can be achieved by using jQlite:
https://docs.angularjs.org/api/ng/function/angular.element

Can't get bootstrap multiselect to work with angular

I'm trying to get the bootstrap multiselect widget to work. It works when I hardcode all the options, like this:
<select id="topic-select" multiple="multiple">
<option val='math'>math</option>
<option val='critical_reading'>critical reading</option>
<option val='writing'>writing</option>
</select>
$("#topic-select").multiselect({
includeSelectAllOption: true,
selectAllText: 'composite score',
allSelectedText: 'composite score',
selectAllNumber: false,
});
but if I try to populate the options with angular, like this:
<select id="topic-select" multiple="multiple" ng-option="topic in topicList">
</select>
then the dropdown window kindof bugs out, and doesn't show any of the options.
If I remove the javascript turning it into a multiselect, then it DOES show all the options.
I took a look at this similar question:
angularjs-ng-repeat-in-bootstrap-multiselect-dropdown
but couldn't didn't have any luck with it.

you don't really require Bootstrap multi-select if you're going for its functionality. You can get the same functionality in Angular, by populating your options in a dropdown, and adding them to a new list on ng-click.
<span uib-dropdown on-toggle="toggled(open)" auto-close = "outsideClick" >
<a class = "filter-names" href id="simple-dropdown" uib-dropdown-toggle>
My_Dropdown<span ng-repeat="list in generated_list">{{list.genre_name}},</span><b class="caret"></b>
</a>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown" >
Search: <input type = "text" placeholder = "search in my list" ng-model = "search.name" />
<li ng-repeat="item in list_to_populate | filter:search" ng-class = "{true: 'filter-selected', false: ''}[item.selected == true]" ng-click="addToFilter(item)">
{{item.name}}
</li>
</ul>
</span>
And in the controller:
$scope.addToFilter = function(item) {
if(item.selected == "undefined" || item.selected == false)
{
item.selected = true;
Filters.addToFilters(item);
}
else
{
Filters.removeFromFilters(item);
item.selected = false;
}
}
And finally have a service "Filters" to store this list and call functions to use it anywhere.

You are missing "ng-model".
It is "ng-options" and not "ng-option".
Try this:
<select id="topic-select" multiple ng-model="selectedTopics" ng-options="topic as topic.name for topic in topicList">
</select>

Instead of populating the options with angular, I just add them to the div with vanilla javascript like this:
var topicSelect = $("#topic-select");
for (var topicId in topicList) {
topicSelect[0].add(new Option(topicList[topicId], topicId));
}
and everything works now.

Angularjs: radio button checked

I'm trying to build a color configurator in AngularJS using radio buttons and everything seems to be working, the data binds, etc... but I'm not able to set the default color radio button checked. As I see in the docs if the ng-model is the same as the radio value the input should be auto-checked but I don't know if this only work for strings and not for objects.
This is the HTML:
<div ng-app ng-controller="ThingControl">
<ul >
<li ng-repeat="color in colors">
<input type="radio" ng-model="thing.color" value="{{color}}" />{{ color.name }}
</li>
</ul>
Preview: {{ thing }}
</div>
And this is the JS:
function ThingControl($scope){
$scope.colors = [
{ name: "White", hex: "#ffffff"},
{ name: "Black", hex: "#000000"}
]
$scope.thing = {
color: $scope.colors[1]
}
}
You can see the previous example in this fiddle:
http://jsfiddle.net/xWWwT/1/
Thanks very much in advance!

Selection is matched by the string defined in Value, so you can either do
value="{{color.name}}"
$scope.thing = {
color: $scope.colors[1].name
}
or
value="{{color}}"
$scope.thing = {
color: JSON.stringify($scope.colors[1])
}
As #bertez mentioned, use ng-value is the best solution.
ng-value="color"

Have you already tried ng-change directive? You can use a expression to set it checked, try this.
<div ng-app ng-controller="ThingControl">
<ul >
<li ng-repeat="color in colors">
<input type="radio" ng-model="thing.color" value="{{color}}" ng-checked="$index == 0" />{{ color.name }}
</li>
</ul>
Preview: {{ thing }}
</div>

Highlight Corresponding Names With Javascript

I have a list of names to display in a browser:
Alan, Ben, Cindy, Dan, Ellen, Fred.
I'd like the user to be able to select male or female.
Then I'd like the name(s) of people who are that gender to change colors, or become highlighted.
Is there a way to do this with JavaScript?

If i understand you correctly, you can do following:
// step 1 create list of names with classes
<ul>
<li class="person male">Alan</li>
<li class="person male">Ben</li>
<li class="person female">Cindy</li>
</ul>
// step 2 create dropdown list of genders
<select id="my-dropdown-id" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
// step 3 simple jQuery script
<script type="text/javascript">
$('#my-dropdown-id').change(function() {
$('.person').removeClass('selected');
$('.' + this.value).addClass('selected');
});
</script>
<style>
.selected{
background: yellow;
}
</style>
This is a very simple solution, though i believe it implements your idea at least theoretically.