two <class=form-control"> with ng-repeat - javascript

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.

Related

How to use ngModel in the radio group from the api in angular

here's the code.
list.component.html
<form nz-form [formGroup]="taskFormGroup" (submit)="saveFormData()">
<div nz-row *ngFor="let remark of checklist">
<div nz-col nzXXl="12" *ngFor="let task of remark.tasks" style="padding: .5rem;">
<div nz-row nzGutter="6" nzType="flex" nzAlign="middle" style="border-left: 5px solid rgba(167, 0, 51, 0.5);">
<div nz-col nzSpan="8">
<label [textContent]="task.name"></label>
</div>
<div nz-col nzSpan="8">
<nz-form-item>
<nz-form-control>
<nz-radio-group formControlName="radiostatus" [(ngModel)]="radio" (ngModelChange)="onChangeStatus($event)">
<label nz-radio nzValue="passed">Passed</label>
<label nz-radio nzValue="failed">Failed</label>
</nz-radio-group>
</nz-form-control>
</nz-form-item>
</div>
</div>
</div>
</div>
</form>
list.component.ts
checklist = [
{
"id": "txv3vvBr8KYB",
"assetType": {
"id": "1fKBO4w0XHg7H",
"code": "PRD",
"name": "Printing1"
},
"tasks": [
{
"id": "1fKBO4w0XHg7H",
"name": "Task 1",
"description": "Check oil spill"
},
{
"id": "ESOSA6aCrOER",
"name": "Sample1",
"description": "Desc1"
}
]
},
{
"id": "EwQciw9whx6B",
"tasks": [
{
"id": "1nU7uASqfvLPD",
"name": "TASK8888",
"description": "DESC8888"
},
{
"id": "EwQciw9whx6B",
"name": "TASK9999",
"description": "DESC9999"
}
]
}
];
When selecting on the passed or failed, when it select on the 1st item it shouldn't affect the 2nd item. for example on the 1st item, it select the passed in the second item it shouldn't select the passed on the second.
on my part when I select the passed on the first item, it affect the second item which it select also the passed.
In your code you have same ngModel binding mame for all form control. Try to assign unique name
component.html
<div nz-row *ngFor="let remark of checklist; let i = index">
<div nz-col nzXXl="12" *ngFor="let task of remark.tasks" style="padding: .5rem;">
<div nz-row nzGutter="6" nzType="flex" nzAlign="middle" style="border-left: 5px solid rgba(167, 0, 51, 0.5);">
<div nz-col nzSpan="8">
<label [textContent]="task.name"></label>
</div>
<div nz-col nzSpan="8">
<nz-form-item>
<nz-form-control>
<nz-radio-group [(ngModel)]="task.id" (ngModelChange)="onChangeStatus($event)">
<label nz-radio nzValue="passed">Passed</label>
<label nz-radio nzValue="failed">Failed</label>
</nz-radio-group>
</nz-form-control>
</nz-form-item>
</div>
</div>
</div>
</div>
Example

ng-option set default value in Angularjs

I'm having trouble binding my default value to a ng-option. I already searched for the answer to my question but can't seem to find one.
My problem is that I have 3 cascading selects with one model.
default values
vm.roomData.branch = 'Lucena';
vm.roomData.building = 'mhq';
vm.roomData.roomFloor = '3rd Floor';
html
<div class="col-md-4">
<label for="branch">
<strong>Branch</strong>
</label>
<select ng-options="loc as loc.branch for loc in vm.locations" class="form-control" ng-model="vm.roomData.branch">
</select>
<small id="emailHelp" class="form-text text-muted">Select branch.</small>
</div>
<div class="col-md-4">
<label for="building">
<strong>Building</strong>
</label>
<select ng-options="loc as loc.name for loc in vm.roomData.branch.building" ng-model="vm.roomData.building" class="form-control">
</select>
</div>
<div class="col-md-4">
<label for="roomFloor">
<strong>Room Floor</strong>
</label>
<select ng-options="loc.floors as loc for loc in vm.roomData.building.floors" ng-model="vm.roomData.roomFloor" class="form-control">
</select>
</div>
vm.locations data
[
{
"_id": "5a681380b7c41e7df2076819",
"branch": "Lucena",
"__v": 0,
"building": [
{
"name": "MHQ",
"floors": [
"Ground Floor",
"2nd Floor",
"3rd Floor"
]
}
],
"dateCreated": "2018-01-24T05:02:56.465Z"
},
{
"_id": "5a681aecb7c41e7df207681d",
"branch": "Lucban",
"__v": 0,
"building": [
{
"name": "MHQ1",
"floors": [
"ground floor",
"2nd floor"
]
}
],
"dateCreated": "2018-01-24T05:34:36.775Z"
}]
try initializing the default values like this,
$scope.roomData.branch = $scope.locations.find((loc) => loc.branch === 'Lucena');
$scope.roomData.building = $scope.roomData.branch.building.find((br) => br.name.toLowerCase() == 'mhq');
$scope.roomData.roomFloor = '3rd Floor' ;
like
var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
var vm = this;
vm.roomData = {};
vm.locations = [{
"_id": "5a681380b7c41e7df2076819",
"branch": "Lucena",
"__v": 0,
"building": [{
"name": "MHQ",
"floors": [
"Ground Floor",
"2nd Floor",
"3rd Floor"
]
}],
"dateCreated": "2018-01-24T05:02:56.465Z"
},
{
"_id": "5a681aecb7c41e7df207681d",
"branch": "Lucban",
"__v": 0,
"building": [{
"name": "MHQ1",
"floors": [
"ground floor",
"2nd floor"
]
}],
"dateCreated": "2018-01-24T05:34:36.775Z"
}
];
vm.roomData.branch = vm.locations.find((loc) => loc.branch === 'Lucena'); debugger
vm.roomData.building = vm.roomData.branch.building.find((br) => br.name.toLowerCase() == 'mhq');
vm.roomData.roomFloor = '3rd Floor' ;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl as vm">
<div class="col-md-4">
<label for="branch">
<strong>Branch</strong>
</label>
<select ng-options="loc as loc.branch for loc in vm.locations" class="form-control" ng-model="vm.roomData.branch">
</select>
<small id="emailHelp" class="form-text text-muted">Select branch.</small>
</div>
<div class="col-md-4">
<label for="building">
<strong>Building</strong>
</label>
<select ng-options="loc as loc.name for loc in vm.roomData.branch.building" ng-model="vm.roomData.building" class="form-control">
</select>
</div>
<div class="col-md-4">
<label for="roomFloor">
<strong>Room Floor</strong>
</label>
<select ng-options="o as o for o in vm.roomData.building.floors" ng-model="vm.roomData.roomFloor" class="form-control">
</select>
</div>
</body>

Angular JS Cascading Selects with ng-model and ng-options

So I'm kinda stuck at the 3rc select connected to previous select model.
First is you must select a branch and after that you can select the building name and on what floor.
vm.locations data
[
{
"_id": "5a61acfdd5df1761dd2eb1ef",
"branch": "Lucena City",
"__v": 0,
"building": [
{
"name": "mhq",
"floors": [
"1st",
"2nd",
"3rd"
]
}
],
"dateCreated": "2018-01-19T08:31:57.121Z"
},
{
"_id": "5a61ad6fd5df1761dd2eb1f1",
"branch": "Lucban",
"__v": 0,
"building": [
{
"name": "mhq",
"floors": [
"ground floor",
"2nd floor",
"3rd floor",
"4th floor",
"5th floor"
]
}
],
"dateCreated": "2018-01-19T08:33:51.761Z"
},
{
"_id": "5a61ada1d5df1761dd2eb1f2",
"branch": "loperz",
"__v": 0,
"building": [
{
"name": "lope",
"floors": [
"ground floor",
"1st floor"
]
}
],
"dateCreated": "2018-01-19T08:34:41.904Z"
}]
html side
<div class="row justify-content-md-center">
<div class="col-md-4">
<label for="branch">
<strong>Branch</strong>
</label>
<select ng-options="loc as loc.branch for loc in vm.locations" ng-model="vm.locationTest" class="form-control">
</select>
<small id="emailHelp" class="form-text text-muted">Select branch.</small>
</div>
<div class="col-md-4">
<label for="building">
<strong>Building</strong>
</label>
<select ng-options="ds as ds.building for ds in vm.locationTest" ng-model="vm.roomData.building" class="form-control">
</select>
</div>
<div class="col-md-4">
<label for="roomFloor">
<strong>Room Floor</strong>
</label>
<select ng-options="ds as ds for ds in vm.locationTest.floors" ng-model="vm.roomData.roomFloor" class="form-control">
</select>
</div>
Selecting a branch works, After that I'm having trouble passing the data to the 2nd and 3rd select. I'm not really good at handling object data.
Looks like you have a typo here:
<select ng-options="ds as ds.building for ds in vm.locationTest" ng-model="vm.roomData.building" class="form-control">
</select>
Specifically the vm.locationTest should be vm.locationTest.building and ds.building should be ds.name
So it will then be:
<select ng-options="ds as ds.name for ds in vm.locationTest.building" ng-model="vm.roomData.building" class="form-control">
</select>
Then, we'll also need to fix the 3rd ng-options:
vm.locationTest.floors becomes vm.roomData.building.floors

Nested select box issue changing the first one

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/

Checkbox tag not working properly in Anuglar jS

I'm building a web app which has a form with many different types of questions. Now, I'm suffering with checkbox type of questions.
Here is the view:
<div class="form-group" ng-class="{ 'has-error': form.$submitted && form[field.id].$invalid }" ng-if="field.type === 'checkbox'">
<label for="{{field.id}}">{{field.title}}</label>
<br>
<label ng-repeat="value in field.values"><input type="checkbox" id="{{field.id}}" name="field.id" ng-model="formData[field.id]"> {{value.title}}</label>
<p class="form-group-note" ng-if="field.info" ng-bind="field.info"></p>
<div ng-show="form.$submitted" ng-cloack>
<span class="help-block" ng-show="form['{{field.id}}'].$error.required" ng-if="field.validations.required">Please enter a value, this field is required</span>
</div>
</div>
Here is a JSON I'm rendering:
{
"id": "4_6_yes_no_question",
"title": "6. Do you qualify for this?",
"type": "checkbox",
"info": "If yes, check yes",
"size": {
"width": 100,
"height": 1
},
"validations": {
"required": true
},
"values": [
{
"id": 0,
"title": "Not Selected"
},
{
"id": 1,
"title": "Yes"
},
{
"id": 2,
"title": "No"
}
]
}
When my view is shown, it shows 3 checkboxes with different titles(not selected, yes, no). The problem is that when a user selects one of the boxes, it selects all. And the data being saved to localStorage is only true or false. Is it possible to save as the tile I have in JSON?
First of all, this is a Yes or No question. You cannot select both. So you need to make it Radio button.
Now you can add a value="{{field.id}}" to the input element so that you get to chose what value is stored in the ng-model. And initiate the ng-model at the the parent element of that section of your form using ng-init="formData[field.id]=0". It will make Not selected option ckecked by default.
A demo:
angular.module('theApp', []).controller('theCtrl', function($scope) {
$scope.field = {
"id": "4_6_yes_no_question",
"title": "6. Do you qualify for this?",
"type": "radio",
"info": "If yes, check yes",
"size": {
"width": 100,
"height": 1
},
"validations": {
"required": true
},
"values": [{
"id": 0,
"title": "Not Selected"
}, {
"id": 1,
"title": "Yes"
}, {
"id": 2,
"title": "No"
}]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="theApp" ng-controller="theCtrl">
<div ng-init="formData[field.id]=0" class="form-group" ng-class="{ 'has-error': form.$submitted && form[field.id].$invalid }" ng-if="field.type === 'radio'">
<label for="{{field.id}}">{{field.title}}</label>
<br>
<label ng-repeat="value in field.values">
<input type="radio" id="{{field.id}}" name="field.id" ng-model="formData[field.id]" value="{{value.id}}">{{value.title}}</label>
<p class="form-group-note" ng-if="field.info" ng-bind="field.info"></p>
<div ng-show="form.$submitted" ng-cloack>
<span class="help-block" ng-show="form['{{field.id}}'].$error.required" ng-if="field.validations.required">Please enter a value, this field is required</span>
</div>
Selected Value is : {{formData[field.id]}}
</div>
</div>

Categories