I am building some logic ith 2 nested select box, basicly i load a json file and pass the data to an array in my vuejs component, the json contains the logic for the 2 select box for example for Business Developemnt i want to load in the second box Financial Proposal and Master Licence...:
{
"Business Development": [
{
"text": "Financial Proposal",
"key": 1
},
{
"text": "Master Licence and Service Agreement",
"key": 2
},
{
"text": "Non-Disclosure Agreement",
"key": 3
},
{
"text": "Relatório de Missão",
"key": 4
}
],
"Configuration Management": [
{
"text": "Configuration Management Plan",
"key": 1
},
{
"text": "Configuration Management Plan For Implementation Projects",
"key": 2
}
I already accomplish something like that, the issue is that when i change the first select box, the second is empty at position 1, like this:
here is my code:
<template>
<div class="row margin-above2 box">
<h3 class="text-center">Template</h3>
<img width="70px" height="70px" class="img img-responsive" src="static/img/word.png">
<form class="box-body form-horizontal">
<div class="form-group">
<div class="col-sm-12">
<select class="form-control" v-model="docData.documentType">
<option v-for="(item,index) in documentNested">
{{ index }}
</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<select class="form-control" v-model="docData.documentSelection">
<option v-for="(item,index) in documentNested[docData.documentType]">{{item.text}}</option>
</select>
</div>
</div>
</form>
</div>
</template>
<script>
import data from '../../interfaceData/documentType.json'
import permissions from '../../interfaceData/permissions.json'
export default {
name: 'app',
data () {
return {
checked: false,
documentNested: data,
permissions: permissions,
listItems: [],
documentData: []
}
},
thank you! :)
You are missing value bind of each option, that should be the value that option represents.
<option v-for="(item,index) in documentNested[docData.documentType]" :value="item">{{item.text}}</option>
and for an automatic selection when the first select changes, you can use a watcher
watch: {
'docData.documentType'(val) {
this.docData.documentSelection = this.documentNested[val][0];
}
}
I tried to simulate your component here, maybe it help you
https://jsfiddle.net/9uke1596/
Related
I have like this template currently:
<div>
<div v-for="(item, key) in items" :key="key">
<div>
<input type="text" :value="item.title">
</div>
<div>
<input type="text" :value="item.description">
</div>
<div class="actions">
<button type="button" #click="discardChanges(item)" :disabled="!itemChanged">Discard changes</button>
<button type="button" #click="sendChanges(item)" :disabled="!itemChanged">Save</button>
</div>
</div>
</div>
<script type="text/javascript">
export default {
data() {
return {
itemChanged: false,
items: [
{
title: "Apple",
description: "The bigger company of the world"
},
{
title: "Amazon",
description: "The bigger online store of the USA"
},
]
}
},
methods: {
sendChanges(item) {
// Send API request to update item
},
discardChanges(item) {
// Set old value if item changed
}
}
}
</script>
In this case I generate dynamic inputs from array of items. I need to correctly control my action buttons by detecting current item changes.
For example user will change second item title and will click to Discard changes button. In this case how I can set old value to input?
Also how I can correctly disable or enable action buttons by comparing ch
I have made use of another array called oldValues and modified the methods accordingly. Also I suggest you to use v-model instead of :value
<div>
<div v-for="(item, key) in items" :key="key">
<div>
<input type="text" v-model="item.title">
</div>
<div>
<input type="text" v-model="item.description">
</div>
<div class="actions">
<button type="button" #click="discardChanges(key)" :disabled="!itemChanged">Discard changes</button>
<button type="button" #click="sendChanges(item, key)" :disabled="!itemChanged">Save</button>
</div>
</div>
</div>
<script type="text/javascript">
export default {
data() {
return {
itemChanged: false,
oldValues: [
{
title: "Apple",
description: "The bigger company of the world"
},
{
title: "Amazon",
description: "The bigger online store of the USA"
},
],
items: [
{
title: "Apple",
description: "The bigger company of the world"
},
{
title: "Amazon",
description: "The bigger online store of the USA"
},
]
}
},
methods: {
sendChanges(item) {
// Send API request to update item
this.oldValues[key]=item;
},
discardChanges(item) {
// Set old value if item changed
this.items[key]=this.oldValues[key];
}
}
}
</script>
I do have a propblem with my angularjs Code.
I have an object which I want to split into two Groups.
The two objects looks something like
{
"_embedded": {
"aspects": [
{
"name": "KPIs",
"holderAssetId": "123",
"aspectTypeId": "KPIs",
"aspectTypeName": "KPIs",
"category": "dynamic",
"description": "description an. ",
"variables": [
{
"name": "Availability_Minutes",
"dataType": "DOUBLE",
"unit": "min",
"searchable": false,
"length": null,
"qualityCode": true,
"defaultValue": null
},
and 2nd one:
"_embedded": {
"assets": [
{
"assetId": "123",
"tenantId": "aaa",
"name": "GA700",
"etag": 1,
"externalId": "",
Now I want to have two Form-Control. In the first one I can choose aspects.name which will be filtered via ng-repeat out of the object. This works right now.
But The variable x in my ng-repeat is not transferred to my second form-control. Have a look at the code below.
What am I doing wrong?
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="form-group">
<label for="choose_asset_form">Asset</label>
<select class="form-control" id="choose_asset_form" ng-model="selected_assetId">
<option ng-repeat="x in ctrl.assets" ng-value="x.assetId">
{{x.name}}
</option>
</select>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="form-group">
<label for="choose_aspect_form">Aspect for {{x.assetId}}</label>
<select class="form-control" id="choose_aspect_form" ng-model="selected_aspect">
<option ng-repeat="x in ctrl.asset.aspects" ng-value="x.name">
{{x.name}}
</option>
</select>
</div>
</div>
</div>
So I can see assets.name in the first Control, but I can not see aspects.name in the second form-control.
I want to show a div tag when selecting a specific option. I am developing this with Angular and Ionic 1. I've been searching around for a while now, but I can't find any answers that works for me, therefore I'm writing this. I want to display the second option (id number 2), but I can't get it to work.
Here's the HTML:
<div class="row row-white">
<div class="col col-white">
<label>
<select name="keys" ng-options="key.name for key in list" ng-change="myCtrl()" ng-model="testValue" class="select-input" style="margin-left:0px;">
<option ng-if="false"></option>
<option ng-value=""></option>
<option ng-value=""></option>
</select>
</label>
</div>
</div>
<div class="divider20"></div>
<div class="row row-white" ng-show="result"> <!-- Won't display!! -->
<div class="col col-white">
<input type="number">
</div>
</div>
And here's the JS:
$scope.list = [{
"id": 1,
"name": "Engångsnyckel"
}, {
"id": 2,
"name": "Fleragångsnyckel"
}]
$scope.myCtrl = function() {
if ($scope.testValue.id == "2") {
$scope.result = true
}
else {
$scope.result = false
}
}
// Sets the first index as placeholder
$scope.testValue = $scope.list[0]
Sorry if this is a dumb and obvious question, but I'm getting desperate.
I hope this will help. You can directly use the data binding property without depending on any functions for the static conditions.
function TodoCtrl($scope) {
$scope.list = [{
"id": 1,
"name": "The Id One"
}, {
"id": 2,
"name": "The Id Two"
}]
// Sets the first index as placeholder
$scope.testValue = $scope.list[0]
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<div class="row row-white">
<div class="col col-white">
<label>
<select name="keys" ng-options="key.name for key in list" ng-model="testValue" class="select-input" style="margin-left:0px;">
<option ng-if="false"></option>
<option ng-value=""></option>
<option ng-value=""></option>
</select>
</label>
</div>
</div>
<div class="divider20"></div>
<div class="row row-white" ng-show="testValue.id==2"> <!-- Won't display!! -->
<div class="col col-white">
<input type="number" placeholder="Enter the number here">
</div>
</div>
</div>
</div>
Your comparison should be with a number
$scope.myCtrl = function() {
if ($scope.testValue.id == 2) {
$scope.result = true
}
else {
$scope.result = false
}
}
It's nice to use track by too in your
<select name="keys" ng-options="key as key.name for key in list track by key.id" ng-change="myCtrl()" ng-model="testValue" class="select-input" style="margin-left:0px;">
</select>
I have a radio button initially in the page which is saving selected item details with value as name.
<div data-bind="foreach: {data:customer ,as:'customerData'}, visible: customer().length > 0">
<label class="btn btn-primary active">
<input type="radio" name="optionsGroup" data-bind="attr: {value:name}, checked: $root.selected">
<span data-bind="text: customer.type"></span>
</label>
</div>
Then in the later page I want to show customer details of the selected item.
I am trying to do like below but I am not getting the desired results and all the objects in customer gets printed instead of selected one.
<div data-bind="foreach: {data:customer,as:'customerData'}, visible: customer().length > 0">
<div data-bind:"if:$root.selected() === customer.name">
<p data-bind="text:customer.name" class="w3-center"></p>
<p data-bind="text:customer.college" class="w3-center"></p>
<p data-bind="text:customer.school" class="w3-center"></p>
</div>
I tried to make a foreach with if condition but that does'nt solve the problem as i stated earlier in the post also the json file looks like this:
"customer": [{
"order": "01",
"name": "custom 1",
"type": "A1",
"school": "ABCDS",
"College": "university of florida"
},
{
"order": "02",
"name": "custom 2",
"type": "A2",
"school": "ABCDS",
"College": "university of new york"
}
]
var jsonData ='[
{"type":"product",
"id":1,"label":"Color",
"placeholder":"Select Jean Color",
"description":"",
"defaultValue":"Brown",
"choices":[{
"text":"Denim",
"price":"$0.00",
"isSelected":"false"
},
{
"text":"Black",
"price":"$0.00",
"isSelected":"true"
},
{
"text":"Brown",
"price":"$0.00",
"isSelected":"false"
}],
"conditionalLogic":
{
"actionType":"show",
"logicType":"all",
"checkbox":true,
"rules":[{
"fieldId":2,
"operator":"or",
"value":"Regular"
},
{
"fieldId":3,
"operator":"or",
"value":"Low"
}]
}},
{
"type":"product","id":2,"label":"Color","placeholder":"Select Color","description":"Color Descrioton","defaultValue":"Red","choices":[{"text":"Red","price":"200","isSelected":"true"}],"conditionalLogic":""},{"type":"product","id":3,"label":"Select Fit","placeholder":"Select Jean Fit","description":"","defaultValue":"Fit","choices":[{"text":"Regular","price":"$0.00","isSelected":"false"},{"text":"Skinny","price":"$10.00","isSelected":"false"},{"text":"Fit","price":"$5.00","isSelected":"false"}],"conditionalLogic":{"actionType":"show","logicType":"all","checkbox":true}},{"type":"product","id":4,"label":"Select Rise","placeholder":"Select Rise","description":"","defaultValue":"Low","choices":[{"text":"High","price":"$29.00","isSelected":"false"},{"text":"Low","price":"$0.00","isSelected":"true"}],"conditionalLogic":""},{"type":"product","id":5,"label":"Size","placeholder":"Select Size","description":"","defaultValue":"Size 36","choices":[{"text":"Size 30","price":"100.00","isSelected":"false"},{"text":"Size 32","price":"100.00","isSelected":"true"},{"text":"Size 34","price":"100.00","isSelected":"true"},{"text":"Size 36","price":"100.00","isSelected":"false"}],"conditionalLogic":""}]';
$scope.attributes = jsonData;
HTML
<div class="col-sm-6" ng-repeat="product_attribute in attributes">
<div class=" form-group">
<label class="font-noraml">{{product_attribute.label}}</label>
<select class="form-control m-b" name="option_choices" ng-selected="option.isSelected=='true'" ng-model="option.price" ng-options="option.price as option.text for option in product_attribute.choices">
<option value="">{{product_attribute.placeholder}}</option>
</select>
</div>
</div>
Above I have posted my JSON and HTML code. I want to show all the attributes choices in my dropdown with default selected value. Please check my HTML I have tried ng-selected="option.isSelected=='true'" to default select my choices options. But that is not working.
Screenshot:
You must have defaultValue as object that comprising all properties.Here is your solution ->
jsfiddle
For example:
"defaultValue": {
"text": "Black",
"price": "$0.00",
"isSelected": "true"
}