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
Related
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/
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>
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"
}
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
<tr ng-show="show">
<td>
<select class="form-control" data-ng-model="MyModel.FirstName" data-ng-options="firstname.Name for name in MyProperties" ng-show="editmode" style="width:100%; ">
<option value="" style="margin-left:25px">-Select First Name-</option>
</select>
</td>
<td>
<select class="form-control" data-ng-model="MyModel.LastName.SelectedOption" ng-options="lastname.Name for lastname in MyModel.LastName.Options" ng-show="editmode" style="width:100%; ">
<option value="" style="margin-left:25px">-Select Last Name-</option>
</select>
</td>
<td>
</td>
How do I get both dropdown (dynamically generated) values in single model which I could pass to save method and get it in index,js
index.js
$scope.Save = function (MyModel) {
var AlldataObj = {
FirstName: MyModel.FirstName,
LastName: MyModel.LasttName
};
Have a look at this code might be useful for you
<doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body ng-app="myApp" data-ng-controller="HomeCtrl">
<select ng-model="opt.first" ng-options="obj.code as obj.code for obj in opts">
<option value="">select</option>
</select>
<select ng-model="opt.second" ng-options= "obj.code as obj.code for obj in opts1">
<option value="">select</option>
</select>
<button ng-click="save(opt)">Save</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module('myApp', []);
angular.module('myApp').controller('HomeCtrl', ['$scope', function($scope) {
$scope.opts = [
{
"code" : "ABC",
"num" : ["246810","4681012","681012"]
},
{
"code" : "DEF",
"num" : ["13579","357913","5791315"]
}
] ;
$scope.opts1 = [
{
"code" : "ABC",
"num" : ["246810","4681012","681012"]
},
{
"code" : "DEF",
"num" : ["13579","357913","5791315"]
}
] ;
$scope.save=function(model)
{
console.log("model==", model)
var obj={};
obj.firstname=model.first;
obj.lastname=model.second;
console.log("first==", obj.firstname);
console.log("last==", obj.lastname)
}
}]);
</script>
</body>
</html>
There seems to be some convolution in your model, which I'm guessing stems form application needs that aren't obvious here. However the main answer to your question, I believe is that you can defined the model in the function as: ng-click="Save(MyModel)" where MyModel is a $scope variable.
HTML
Save
Further more, you can manipulate this information in your save function:
$scope.Save = function(MyModel) {
var values = {
first: MyModel.FirstName,
last: MyModel.LastName.SelectedOption
};
console.log(values);
//Or $http/Restangular post these values somewhere
}
I've created a working Plunkr for your reference here.