I have the following:
http://jsfiddle.net/Qgmz7/119/
I am trying to keep track of what is selected and what is not, how do I go about doing this?
<div ng-app>
<div ng-controller="cCtrl">
<select multiple ng-model="campaign" ng-options="c.ID as c.Name for c in campaigns">
<option ng-selected="c.Selected" value="">-- choose campaign --</option>
</select>
<ul>
<li ng-repeat="item in campaigns">{{item.Name}} - {{item.Selected}}</li>
</ul>
</div>
</div>
function cCtrl($scope) {
$scope.campaigns = [
{Selected:true, ID: 1, Name:"James"},
{Selected:false, ID: 2, Name:"James"},
{Selected:true, ID: 3, Name:"James"},
];
}
Hi try this http://jsfiddle.net/a63k106s/
function cCtrl($scope) {
$scope.campaigns = [
{Selected:true, ID: 4, Name:"James"},
{Selected:false, ID: 2, Name:"James"},
{Selected:true, ID: 3, Name:"James"},
];
$scope.$watch('campaign', function (nowSelected) {
angular.forEach($scope.campaigns, function(campaign) {
campaign.Selected = nowSelected.indexOf(campaign.ID) >= 0
});
});
}
Related
I have an array called cars which has 2 objects. In that object I have another array called brands. Inside that i have another array called models.
I want to display the data in the models array in a table using Vue.js This is what I'm getting so far.
I'm new to Vue.js and programming, so please help me with this problem. TIA
<template>
<div>
<h1>Vehicle Search Form</h1>
<form>
<div class="form-check form-group">
<label for="car">Choose a Car Type</label>
<select v-model="selectedCar">
<option v-for="car in cars" :value="car" :key="car.carId">{{car.car}}</option>
</select>
<label for="brand" v-if="selectedCar != -1">Choose a Brand</label>
<select v-model="selectedBrand" v-if="selectedCar != -1">
<option v-for="brand in selectedCar.brands" :key="brand.id">{{brand.brand}}</option>
</select>
<table style="width:100%" v-if="selectedCar != -1 && selectedBrand != -1">
<tr>
<th>Models</th>
</tr>
<tr v-for="model in selectedCar.brands.models" :key="model">
<td></td>
<td> {{model}}</td>
</tr>
</table>
</div>
</form>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
cars: [
{
carId: 1,
car: 'SUV',
brands: [
{
id: 1,
brand: 'Ford',
models: ['Ford EcoSport', 'Ford Expedition', 'Ford Edge', 'Ford Escape']
},
{id: 2, brand: 'GMC', models: ['GMC Terrain', 'GMC Suburban']},
{id: 3, brand: 'Dodge', models: ['Journey', 'Grand Caravan']},
{id: 4, brand: 'Mercedes-Benz', models: ['G-Class']},
{id: 5, brand: 'Audi', models: ['Audi Q3', 'Audi Q5', 'Audi Q5', 'Audi Q7']}
]
},
{
carId: 2,
car: 'Sedan',
brands: [
{brand: 'Dodge', models: ['Charger', 'Challenger', 'Durango']},
{brand: 'Mercedes-Benz', models: ['C-Class', 'AMG', 'E-Class', 'S-Class']},
{brand: 'Audi', models: ['Audi A4', 'Audi A8', 'Audi RS 3']}
]
}
],
selectedCar: -1,
selectedBrand: -1,
// selectedModel: -1
}
},
};
</script>
<style scoped>
select {
border: 1px solid rgb(27, 189, 154);
}
</style>
Your did confuse property names. I renamed your variables and fixed the issue.
You forgot to bind the values of each brand to the select option :value="brand".
<select v-model="selectedBrand" v-if="selectedCar != -1">
<option v-for="brand in selectedCar.brands" :key="brand.id" :value="brand">{{brand.brand}}</option>
</select>
Here's working updated code:
var vm = new Vue({
el: "#container",
data() {
return {
cars: [
{
carId: 1,
car: 'SUV',
brands: [
{
id: 1,
brand: 'Ford',
models: ['Ford EcoSport', 'Ford Expedition', 'Ford Edge', 'Ford Escape']
},
{id: 2, brand: 'GMC', models: ['GMC Terrain', 'GMC Suburban']},
{id: 3, brand: 'Dodge', models: ['Journey', 'Grand Caravan']},
{id: 4, brand: 'Mercedes-Benz', models: ['G-Class']},
{id: 5, brand: 'Audi', models: ['Audi Q3', 'Audi Q5', 'Audi Q5', 'Audi Q7']}
]
},
{
carId: 2,
car: 'Sedan',
brands: [
{brand: 'Dodge', models: ['Charger', 'Challenger', 'Durango']},
{brand: 'Mercedes-Benz', models: ['C-Class', 'AMG', 'E-Class', 'S-Class']},
{brand: 'Audi', models: ['Audi A4', 'Audi A8', 'Audi RS 3']}
]
}
],
selectedDesign: null,
selectedBrand: null,
}
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='container'>
<div>
<h1>Vehicle Search Form</h1>
<form>
<div class="form-check form-group">
<label for="car">Choose a Car Type</label>
<select v-model="selectedDesign">
<option v-for="car in cars" :value="car" :key="car.carId">{{car.car}}</option>
</select>
<label for="brand" v-if="selectedDesign">Choose a Brand</label>
<select v-model="selectedBrand" v-if="selectedDesign">
<option v-for="brand in selectedDesign.brands" :key="brand.id" :value="brand">{{brand.brand}}</option>
</select>
<table style="width:100%" v-if="selectedBrand">
<tr>
<th>Models</th>
</tr>
<tr v-for="model in selectedBrand.models" :key="model">
<td></td>
<td> {{model}}</td>
</tr>
</table>
</div>
</form>
</div>
You can always initialize the data using null and when you use v-if conditional rendering the null is considered as false.
Check JavaScript Truthy and Falsy on MDN
As i understand, you need to get selected brand models and display them in next select.
So you can do it using computed property and :value attribute for option:
<select v-model="selectedBrand" v-if="selectedCar != -1">
<option
v-for="(brand, index) in selectedCar.brands"
:key="brand.id"
:value="brand.id"
>
{{brand.brand}}
</option>
</select>
This template will insert an id of selected brand to selectedBrand property, then you can create computed property which will represent selected brand object:
computed: {
selectedBrandObject() {
let selectedBrand = {};
for(let brand of this.selectedCar.brands) {
if(parseInt(brand.id, 10) === parseInt(this.selectedBrand, 10)) {
selectedBrand = brand;
break;
}
}
return selectedBrand;
}
}
Than you can have access to selected brand in the template, so:
<tr v-for="model in selectedBrandObject.models" :key="model">
<td></td>
<td> {{model}}</td>
</tr>
So there will be only selected brand models. If you need more info about computed properties, you can look here
I'm new to angularjs. what i'm trying to do is this when i select an options from selectbox1 and selectbox2 value changes according to that value from selectbox1.
For Example: if the user choose Frontend from selectbox1 and selectbox2 need to display values are 'css, jquery, html, angularjs', but here when i choose any options from selectbox1. it display 'php, ruby, c#, python', any idea what i'm doing wrong. please help me.
angular.module("ctrl", [])
.controller("appsctrl", function ($scope) {
$scope.data = {
frontend: [{ id: 1, name: 'css' }, { id: 2, name: 'jquery' }, { id: 3, name: 'html' }, { id: 4, name: 'angularjs' }],
Server: [{ id: 1, name: 'php' }, { id: 2, name: 'ruby' }, { id: 3, name: 'c#' }, { id: 4, name: 'python' }]
};
$scope.selectvalues = function () {
angular.forEach($scope.data, function (value, key) {
$scope.values = value;
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ctrl" ng-controller="appsctrl">
<div class="selectvalues">
<select class="form" ng-model="select" ng-change=selectvalues()>
<option value="">Select</option>
<option value="FrontEnd">FrontEnd</option>
<option value="Server">Server</option>
</select>
<select class="form" ng-model="select_list">
<option value="">Select</option>
<option ng-repeat ="value in values" value ="{{value.name}}">{{value.name}}</option>
</select>
</div>
</div>
It should be like this.
you have some problems.
The option value for first select tag was incorrect.
<option value="frontend">FrontEnd</option>
<option value="Server">Server</option>
angular.module("ctrl", [])
.controller("appsctrl", function($scope) {
$scope.data = {
"frontend": [{
id: 1,
name: 'css'
}, {
id: 2,
name: 'jquery'
}, {
id: 3,
name: 'html'
}, {
id: 4,
name: 'angularjs'
}],
"Server": [{
id: 1,
name: 'php'
}, {
id: 2,
name: 'ruby'
}, {
id: 3,
name: 'c#'
}, {
id: 4,
name: 'python'
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ctrl" ng-controller="appsctrl">
<div class="selectvalues">
<select class="form" ng-model="select">
<option value="">Select</option>
<option value="frontend">FrontEnd</option>
<option value="Server">Server</option>
</select>
<select class="form" ng-model="select_list" ng-options="value.id as value.name for value in data[select]">
<option value="" style="display:none">Select</option>
</select>
</div>
</div>
Try this. Change the value of select option, from FrontEnd to frontend. and now on changing the select option, the ng-model for your select will be frontend or Server and on the controller use $scope.values = $scope.data[$scope.select] in your change event. That will solve your issue.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="ctrl" ng-controller="appsctrl">
<div class="selectvalues">
<select class="form" ng-model="select" ng-change=selectvalues()>
<option value="">Select</option>
<option value="frontend">FrontEnd</option>
<option value="Server">Server</option>
</select>
<select class="form" ng-model="select_list">
<option value="">Select</option>
<option ng-repeat ="value in values" value ="{{value.name}}">{{value.name}}</option>
</select>
</div>
</div>
<script type="text/javascript">
angular.module("ctrl", [])
.controller("appsctrl", function ($scope) {
$scope.data = {
frontend: [{ id: 1, name: 'css' }, { id: 2, name: 'jquery' }, { id: 3, name: 'html' }, { id: 4, name: 'angularjs' }],
Server: [{ id: 1, name: 'php' }, { id: 2, name: 'ruby' }, { id: 3, name: 'c#' }, { id: 4, name: 'python' }]
};
$scope.selectvalues = function () {
$scope.values = $scope.data[$scope.select];
}
});
</script>
</body>
</html>
I have a list such as
var items = [1, 2, 3];
var list = [
{
id: 1,
name: 'name 1'
},
{
id: 2,
name: 'name 3'
},
{
id: 3,
name: 'name 2'
}
]
and I use li tag (not option) to show this list.
<div ng-repeat="item in items">
<ul>
<li ng-repeat="name in listName">
<a ng-click="">{{name.name}}</a>
</li>
</ul>
</div>
It will show 3 item and 3 list is same in a item.
Help me when I click name 1 of item 1, will hide name 1 of item 2, 3,... Click name 2 in item 2 will hide name 2 of item 1, 3...
Thanks
Here is how you can do it
angular.module("myApp", []).controller("myCtrl", function($scope) {
$scope.items = [1, 2, 3];
$scope.list = [{
id: 1,
name: 'name 1'
}, {
id: 2,
name: 'name 3'
}, {
id: 3,
name: 'name 2'
}];
$scope.hideOthers = function(item, name){
$scope.selectedItem = item;
$scope.selectedName = name;
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
<body>
<div ng-controller="myCtrl">
<div ng-repeat="item in items">
<ul>
<li ng-repeat="name in list">
<a ng-click="hideOthers(item, name.name)" ng-show="!selectedItem || name.name !== selectedName || item === selectedItem">{{name.name}}</a>
</li>
</ul>
</div>
</div>
</body>
</html>
1) You dnt need use variable items only for set loop count. It can make in ng-repeat;
2) You have error in variable name - list, not listName;
<div ng-repeat="i in [1, 2, 3]">
<ul>
<li ng-repeat="name in list">
<a ng-click="name.select = i" ng-if="!name.select || name.select === i">{{name.name}}</a>
<strike ng-if="name.select && name.select !== i">{{name.name}}</strike>
</li>
</ul>
</div>
UPDATE:
3) Also use $scope.list = //data for broadcast data to template;
Simple problem, probably discussed many times, but I can't find a proper solution on this simple issue.
The problem:
Why are the Daltons selectable, but the selected Daltons don't show up in the select-element?
Controller:
var myApp = angular.module('myApp', ['ui.select2']);
function MyCtrl($scope) {
$scope.daltons = [
{ id: 10, name: 'Joe' },
{ id: 20, name: 'William' },
{ id: 30, name: 'Jack' },
{ id: 40, name: 'Averell' },
{ id: 50, name: 'Ma' }
];
$scope.selectedDaltons = [40]; // Averell is preselected
};
View:
<div ng-controller="MyCtrl">
<label for="1">Please select items:</label>
<select id="1"
ui-select2
multiple
ng-model='selectedDaltons'
ng-options="dalton.id as dalton.name for dalton in daltons">
</select>
<label for="2">Selected Items:</label>
<ul id="2">
<li ng-repeat="dalton in selectedDaltons">{{dalton}}</li>
</ul>
</div>
Here it is as a jsfiddle
I think the issue is that ng-options is not supported in ui-select2. I reworked your fiddle using the option tag with an ng-repeat:
http://jsfiddle.net/u48j0yyc/1/
<div ng-controller="MyCtrl">
<label>Please select items:</label>
<select ui-select2 multiple ng-model='selectedDaltons'>
<option ng-repeat="d in daltons" ng-bind="d.name" value="{{ d.id }}"></option>
</select>
<label>Selected Items:</label>
<ul>
<div ng-bind="selectedDaltons"></div>
</ul>
</div>
var myApp = angular.module('myApp', ['ui.select2']);
function MyCtrl($scope) {
$scope.daltons = [
{ id: 10, name: 'Joe' },
{ id: 20, name: 'William' },
{ id: 30, name: 'Jack' },
{ id: 40, name: 'Averell' },
{ id: 50, name: 'Ma' }
];
$scope.selectedDaltons = [40]; // Averell is preselected
};
How can i filter the second combobox choices based on what i select on first combobox?
So here is the controller... and the view file.
<body ng-app="myApp" ng-controller="myCtrl">
<section class="mainbar">
<section class="matter">
<div class="container">
<h2></h2>
<div class="row">
<div class="widget wblue">
<div class="widget-content user">
</div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
<div>
<select ng-model="pSelected" ng-options="p.id as p.name for p in tier"></select>
<select ng-model="cSelected"
ng-options="c.name for c in cd"></select>
<label><input type="checkbox" </label>
</div>
</div>
</section>
</section>
</body>
and a simple JS
angular.module('myApp', []).
controller('myCtrl', function myCtrl($scope){
$scope.tier = [
{ id: 1, name: 'Tier1Head' },
{ id: 2, name: 'Tier2Head' },
{ id: 3, name: 'Tier3Head' }
];
$scope.cd = [
{ id: 1, idP: 1, name: 'Tier1' },
{ id: 2, idP: 1, name: 'Tier1' },
{ id: 3, idP: 1, name: 'Tier1' },
{ id: 4, idP: 2, name: 'Tier2' },
{ id: 5, idP: 2, name: 'Tier2' },
{ id: 6, idP: 3, name: 'Tier3' },
{ id: 7, idP: 3, name: 'Tier3' }
];
})
And when i click the checkbox.. i need first combobox to be disabled(so i can't select other Parinte)
You can filter results with pipe to filter
and use ng-disabled for select (i had a plnkr for you but it there is something wrong with plnkr functionality at this moment
so here is a HTML, i've change models for selects as well as extended their functionality
<body ng-app="myApp" ng-controller="myCtrl">
<section class="mainbar">
<section class="matter">
<div class="container">
<h2></h2>
<div class="row">
<div class="widget wblue">
<div class="widget-content user">
</div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
<div>
<select ng-model="pSelected" ng-options="p.id as p.name for p in tier"
ng-disabled="tierdisable"></select>
<select ng-model="cSelected"
ng-options="c.name for c in cd | filter:{idP:pSelected}:true "></select>
<label><input type="checkbox" ng-model="tierdisable">Disable</label>
</div>
</div>
</section>
</section>
</body>
and a simple JS
angular.module('myApp', []).
controller('myCtrl', function myCtrl($scope){
$scope.tier = [
{ id: 1, name: 'Tier1Head' },
{ id: 2, name: 'Tier2Head' },
{ id: 3, name: 'Tier3Head' }
];
$scope.cd = [
{ id: 1, idP: 1, name: 'Tier1' },
{ id: 2, idP: 1, name: 'Tier1' },
{ id: 3, idP: 1, name: 'Tier1' },
{ id: 4, idP: 2, name: 'Tier2' },
{ id: 5, idP: 2, name: 'Tier2' },
{ id: 6, idP: 3, name: 'Tier3' },
{ id: 7, idP: 3, name: 'Tier3' }
];
})
disabled :
<div>
Parinti:
<select ng-model="vm.parinti" ng-options="parinte.nume for parinte in vm.parinti" ng-disabled="checked"></select>
Copii:
<select ng-model="vm.copii" ng-options="copil.nume for copil in vm.copii "></select>
Blocat:
<input type="checkbox" ng-model="checked">
</div>