We Keep Coding

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

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.

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/

angular ng-options complex json array

im trying to make a small search engine, using angular and a json object.
im sorting the querys with 3 drop down lists chained so that they populate them selves depending on the selection.
the structure is so: a json object that holds an array of categorys, each category holds an array of products, and each products array hold parameters such as price, name, etc. so when a user selects a category, the second drop down list gets populated with the relevant products. and when the user selects the relevant product the third drop down list gets populated with this products price.
here is the json:
[{
"caregory": "Electronics",
"products": [{
"product": "PC",
"description": "Item4 Product Page",
"price": 99.99
},
{
"product": "PC",
"description": "Item4 Product Page",
"price": 2999.99
},{
"product": "TV",
"description": "lorem ipsum possum",
"price": 250.00
}]
}, {
"caregory": "Home Design",
"products": [{
"product": "Paintings",
"description": "awesome description about anything",
"price": 200.00
}, {
"product": "Pencils",
"description": "we are filters",
"price": 29.99
}, {
"product": "Sharpies",
"description": "loremloremlorem",
"price": 89.00
}
]
}]
here is the js:
var app = angular.module('app', ['angular.filter']);
var Controller = function($scope,$http) {
$http.get('data.json')
.success(function(data) {
$scope.data = data;
});
var data;
$scope.selected = {};
$scope.data = $scope.data;
console.log($scope.data);
var self = this;
$scope.search = function(predicate)
{
$scope.searchPredicate = predicate;
}
}
app.controller('ctrl', Controller);
and here is the view:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="filters.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="jumbotron">
<h1>Search engine</h1>
</div>
<form>
<div class="form-group">
<label for="caregory">Category</label>
<select id="caregory" data-ng-model="selected.category" ng-options="option as option.caregory for option in data | orderBy:'caregory'">
<option value="">None</option>
</select>
<br />
<br />
<label for="filters">Product type</label>
<select id="filters" ng-model="selected.type" ng-options="option as option.product for option in selected.category.products | unique: 'product'">
<option value="">None</option>
</select>
<br>
<br>
<label for="filters">Price</label>
<select id="filters" ng-model="selected.price" ng-options="option as option.price for option in selected.category.products | unique: 'price'">
<option value="">None</option>
</select>
</div>
<div class="form-group" ng-if="selected.price">
<button class="btn btn-primary" ng-click="search(selected.price)">Search</button>
</div>
<div ng-if="searchPredicate">
Searching for <b>{{searchPredicate.product}}</b> in <b>{{searchPredicate.description}}</b> with price <b>{{searchPredicate.price | currency}}</b>
</div>
</form>
</body>
</html>
heres a plunker:
http://plnkr.co/edit/omLQMQa39TRVMXovRKcD?p=preview
thanks!

You need to apply a filter on third select, to filter only products equals to selected:
<select id="filters"
ng-model="selected.price"
ng-options="option as option.price for option in selected.category.products | filter: { product: selected.type.product } | unique: 'price'">
<option value="">None</option>
</select>
take a look at plunker

AngularJs Directive for crossbrowser SELECT Dropdown

I'm trying to create below Cross-browser dropdown:
Currently this is my HTML:
var myapp = angular.module('myapp', []);
myapp.controller('myCtrl', function($scope) { //temporory stuff
$scope.investments = [{
"name": "AARPOperatingFunds"
}, {
"name": "SomeBigTitle"
}, {
"name": "IhatezIE8"
}, {
"name": "ILoveFFDeveLoperEdition"
}, {
"name": "GiveMeSomeLove"
}];
$scope.investment = $scope.investments[0].name;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myCtrl">
<span class="dropdown">
<i ng-bind="investment" class="before"></i>
<select ng-model="investment">
<option ng-repeat="ip in investments | orderBy:'name' " ng-value="ip.name">{{ ip.name }}</option>
</select>
</span>
</div>
But what I need is, when someone selects the Dropdown, ng-bind will update and also
I do not want to add mg-model each time.
And main thing is if OPTION value is sometime like this "AARPOperatingFunds" it should get displayed as "AARP Operating Funds"
Please guide. Can we create any Directive here for the above purpose.
I need something like this:
<span class="dropdown">
<i class="before" mySelectDirective></i>
<select id="investProgram" ng-options="ip for ip in ips | orderBy:'ip' "></select>
</span>
OR this one:
<span class="dropdown mySelectDirective">
</span>

Use ng-options combined with adding a "label" attribute to your array:
$scope.investments = [{
"name": "AARPOperatingFunds",
"label":"AARP Operating Funds"
}, {
"name": "SomeBigTitle",
"label":"Some Big Title"
}];
Then:
<select ng-model="investment" ng-options="opt.name as opt.label for opt in investments"></select>
https://docs.angularjs.org/api/ng/directive/select

AngularJS: two way data binding not working in nested ng-repeat

I am new to AngularJS. I am using nested ng-repeat to generate multiple forms. And form data is json which is dynamic. So the problem is Data binding for TEXT, TEXTAREA and SELECT input is not working.
JSFiddle: http://jsfiddle.net/gTc5v/10/
HTML:
<div ng-controller="ctrl">
<div ng-repeat="form in forms">
<h2>{{form.name}}</h2>
<div ng-repeat="field in form.form_fields">
<div ng-If="showElement(field,'RADIO')">
<div>
<h3>{{field.caption}}</h3>
<span ng-repeat="option in field.optionValues">
<input ng-model="field.answer" type="radio" value="{{option}}" >{{option}}
<br/></input>
</span>
</div>
</div>
<div ng-If="showElement(field,'TEXT')">
<input ng-model="field.answer" type="text" placeholder="{{field.caption}}" />
</div>
<div ng-If="showElement(field,'PARAGRAPH_TEXT')">
<textarea ng-model="field.answer" placeholder="{{field.caption}}"></textarea>
</div>
<div ng-If="showElement(field,'LIST')">
<div>
<h3>{{field.caption}}</h3>
<select ng-model="field.answer">
<option ng-repeat="option in field.optionValues">{{option}}</option>
</select>
</div>
</div>
<div ng-If="showElement(field,'CHECKBOX')">
<div>
<h3>{{field.caption}}</h3>
<span ng-repeat="option in field.optionValues">
<input ng-checked="field.answers.indexOf(option) != -1" ng-click="toggleCheck(field.answers,option)" type="checkbox">{{option}}
<br/></input>
</span>
</div>
</div>
</div>
<br/>
<div ng-repeat="field in form.form_fields">
{{field.caption}} : {{field.answer}}{{field.answers}}
</div>
<br/>
</div>
AangularJS:
angular.module('myApp', []).directive('ngIf', function () {
return {
link: function (scope, element, attrs) {
if (scope.$eval(attrs.ngIf)) {
// remove '<div ng-if...></div>'
element.replaceWith(element.children());
} else {
element.replaceWith(' ');
}
}
};
});
function ctrl($scope) {
$scope.fields = [{
"caption": "Gender",
"questionType": "RADIO",
"optionValues": ["Male", "Female"],
"fieldPriority": "INCLUDE"
}, {
"caption": "City",
"questionType": "TEXT",
"optionValues": "",
"fieldPriority": "INCLUDE"
}, {
"caption": "Address",
"questionType": "PARAGRAPH_TEXT",
"optionValues": "",
"fieldPriority": "INCLUDE"
}, {
"caption": "Nationality",
"questionType": "LIST",
"optionValues": ["Indian", "American"],
"fieldPriority": "INCLUDE"
}, {
"caption": "Tea/Coffee",
"questionType": "CHECKBOX",
"optionValues": ["Tea", "Coffee"],
"fieldPriority": "INCLUDE"
}];
angular.forEach($scope.fields, function(field) {
if(field.questionType == 'CHECKBOX'){
field.answers = [];
} else{
field.answer = "";
}
});
$scope.forms = [{"name":"Form 1","form_fields" : angular.copy($scope.fields)},{"name":"Form 2","form_fields" : angular.copy($scope.fields)}];
$scope.showElement = function (field, type) {
return field.questionType == type;
};
$scope.toggleCheck = function (answer, option) {
if (answer.indexOf(option) === -1) {
answer.push(option);
} else {
answer.splice(answer.indexOf(option), 1);
}
};
}
thanks

Try to remove element.replaceWith below in your directive link function.
element.replaceWith(element.children());
You don't need to call replaceWith() in directive because directive has wrapped the template content and it will be included once compiled.
Here is a workable jsfiddle demo

Do you really need your own ng-If directive? Your example works fine if you use the built-in ng-if.
Note that in either case you need to write it as a lower-case ng-if in your HTML.
Update:
jsfiddle