I want the [Data Presentation Format] applied to [Dropdown Box]. I need the "parent" to be presented as is inside the dropdown box, but I need the "child" to be presented with with a [tab], to show the parent-child relationship.
$scope.itemlist will be prepared in order (i.e. parenta, childa1, childa2, parentb, childb1, childb2)
The HTML:
<div ng-controller="MyCtrl">
<h1>-- Data Presentation Format --</h1>
<ul>
<li ng-repeat="item in itemlist">
<div ng-switch on="item[1]">
<div ng-switch-when="Parent">{{item[0]}}</div>
<div ng-switch-default> {{item[0]}}</div>
</div>
</li>
</ul>
<br/>
<h1>-- Dropdown Box --</h1>
<select ng-model="loc1" ng-options="item[0] for item in itemlist">
<option value="">Item</option>
</select>
<br/><br/>
<h1>-- What I Got --</h1>
<select ng-model="loc2">
<option ng-repeat="item in itemlist">
<div ng-switch on="item[1]">
<div ng-switch-when="Parent">{{item[0]}}</div>
<div ng-switch-default> {{item[0]}}</div>
</div>
</option>
</select>
The javascript:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.itemlist =
[
["Unit A", "Parent"],
["Room A", "Child"],
["Room B", "Child"],
["Room C", "Child"],
["Room D", "Child"],
["Room E", "Child"],
["Unit 1", "Parent"],
["Room 1", "Child"],
["Room 2", "Child"],
["Room 3", "Child"]
];
}
JsFiddle here: http://jsfiddle.net/HB7LU/11174/
I don't think you can use inside the option element, as its not rendered as html. If you insist on using the element instead of something like a jQuery dropdown (which basically is a ), then i'd suggest using dashes or similar to illustrate parent/child relationship.
http://jsfiddle.net/HB7LU/11177/
I solved it using a formatting function i placed on the scope
$scope.formattedItem = function(item) {
return item[1] === 'Parent' ? item[0] : '--' + item[0];
<select ng-model="loc2">
<option ng-repeat="item in itemlist" >
{{formattedItem(item)}}
</option>
</select>
Related
I'm trying to do kind of a cart in IONIC ( I'm new using this framework as well ).
I have a ng-repeat to fill my screen with products from the database (firebase), inside this ng-repeat I have a form.
My form contais 3 elements, an an and a button. When I fill my form and press add. it works fine. but if I add a second product, my first one gets updated with the value of the new one. Exemple:
1) Add a product A. Qtd: 3 unity: mg.
2) Add a product B. Qtd: 8 utity: g.
Then my first product turn into: product A. Qtd: 8 unity: m8.
Some one can please help me?
Following my HTML and my JS
$scope.category = Category.name;
$scope.amount = {count: '', unit: 'mg'};
function AddToCart(product, amount)
{
if(amount.count == null)
return;
if(!$rootScope.cart)
$rootScope.cart = [];
$rootScope.cart.push({
item: product,
qtd: amount
});
showToast();
}
<div class="item item-product" id="{{$index}}-item" ng-repeat="item in vm.Products | filter:filter.product" >
<p style="width: 95%; margin: 0;">{{item.name}}</p>
<button class="arrow-button" ng-click="showDetails($index)" sytle = "border: none; width: 100%;"><i class="icon ion-ios-arrow-right"></i></button>
<div class="details" id ="{{$index}}-details" style="z-index: 999;">
<hr>
<p> {{item.about}}</p>
<form class="cart-area" id ="{{$index}}-form" ng-submit="vm.AddToCart(item, amount,$index)">
<input type="number" id = "{{$index}}-input" ng-model="amount.count" placeholder="Qtd">
<div class="list">
<select ng-model="amount.unit">
<option>mg</option>
<option selected>g</option>
<option>kg</option>
</select>
</div>
<button><i class="fa fa-plus" aria-hidden="true"></i>Adicionar cotação</button>
</form>
</div>
</div>
Okay, so you were on the right track, but didn't quite understand how to bind the controls to a specific product - you were binding them to a shared scope, which is why when you updated one, you updated all of them. That is the nature of the two-way data binding built in to AngularJS.
What you want to do is bind the ng-model value to a property on the item itself, like so:
var app = angular.module("myApp", [])
.controller("myCtrl", ["$scope",
function($scope) {
var $this = this;
$this.Products = [{
name: "Product 1",
about: "Info About Product 1",
count: 3,
unit: "mg"
}, {
name: "Product 2",
about: "Info About Product 2",
count: 8,
unit: "g"
}, {
name: "Product 3",
about: "Info About Product 3",
count: 2,
unit: "kg"
}, ];
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as vm">
<h3>Solution using properties on Products</h3>
<div class="item item-product" id="{{$index}}-item" ng-repeat="item in vm.Products | filter:filter.product">
<p style="width: 95%; margin: 0;">{{item.name}}</p>
<div class="details" id="{{$index}}-details" style="z-index: 999;">
<hr>
<p>{{item.about}}</p>
<div ng-form="{{$index}}-form" class="cart-area" ng-submit="vm.AddToCart(item, amount,$index)">
<input type="number" ng-model="item.count" placeholder="Qtd">
<div class="list">
<select ng-model="item.unit">
<option value="mg">mg</option>
<option value="g">g</option>
<option value="kg">kg</option>
</select>
</div>
<button><i class="fa fa-plus" aria-hidden="true"></i>Adicionar cotação</button>
</div>
</div>
</div>
</div>
I have 2 dropdown menus that are dependent on one another. The first one works perfectly, but I want the second dropdown to populate based on the choice in the first menu. I realize that similar questions have been asked before, but my data seems to be in a different format. Here is my code:
<body ng-app="patientSim" ng-controller="patientCtrl">
<button style="width:20%;" ng-click="addChar()">Add Characteristic</button>
<div class="row">
<div class="col-md-3"><select ng-model="selectedCategory" ng-options="x.cat as (x.cat | underFilter) for x in (enumChars | duplicateFilter)"></select></div>
<div class="col-md-3"><select ng-model="selectedName" ng-options="x.enumName as (x.enumName | underFilter) for x in enumChars"></select></div>
<div class="col-md-3"><button ng-click="eqWeight()">Equalize Weights</button></div>
<div class="col-md-3"><button ng-click="reset()">Reset</button></div>
</div>
And here are 2 sections of the JSON:
{
"enumID": 1,
"enumName": "Gender",
"isTree": false,
"enumAlloc": 10,
"enumVals": [
"Unknown",
"Male",
"Female",
"Transgender"
],
"enumText": null,
"cat": "Demographics"
},
{
"enumID": 2,
"enumName": "Race",
"isTree": false,
"enumAlloc": 15,
"enumVals": [
"Unknown",
"American Indian/Alaska Native",
"Asian",
"Black",
"Native Hawaiian/Other Pacific Islander",
"White/Caucasian",
"Other"
],
"enumText": null,
"cat": "Demographics"
},
The first dropdown is populated with "Demographics" and "Diseases and Injuries", both under the "cat" name. The entire file contains 5 "Demographics" sections and 1 "Diseases and Injures" section. All 6 sections are stored in a scope value called enumChars, which I used in ng-options. There are over 45,000 values for some sections, so I didn't want to post them here. My goal is for the second dropdown to populate with the "enumName" corresponding to the "cat". So for example, if I select "Demographics" in the first dropdown, the second dropdown will populate with "Gender", "Race", and the other enumName values in the other sections also containing "cat": "Demographics". How would I go about doing this? Thanks!!
If I understood your question well you want to populate with the enumVals the 2nd <select> based on the value selected in the 1st. <select>.
Then, if I'm correct, you can do the following:
(function() {
"use strict";
angular.module('app', [])
.controller('mainCtrl', function($scope) {
$scope.enumChars = [
{
"enumID":1,
"enumName":"Gender",
"isTree":false,
"enumAlloc":10,
"enumVals":[
"Unknown",
"Male",
"Female",
"Transgender"
],
"enumText":null,
"cat":"Any category"
},
{
"enumID":2,
"enumName":"Race",
"isTree":false,
"enumAlloc":15,
"enumVals":[
"Unknown",
"American Indian/Alaska Native",
"Asian",
"Black",
"Native Hawaiian/Other Pacific Islander",
"White/Caucasian",
"Other"
],
"enumText":null,
"cat":"Demographics"
}
];
});
})();
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.7/angular-messages.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<button style="width:20%;" ng-click="addChar()">Add Characteristic</button>
<div class="row">
<div class="col-md-3">
<select ng-model="selectedCategory" ng-options="obj as obj.cat for obj in enumChars"></select>
</div>
<div class="col-md-3" ng-if="selectedCategory">
<select ng-model="selectedName" ng-options="enum for enum in selectedCategory.enumVals"></select>
</div>
<div class="col-md-3">
<button ng-click="eqWeight()">Equalize Weights</button>
</div>
<div class="col-md-3">
<button ng-click="reset()">Reset</button>
</div>
</div>
</body>
</html>
I am looking to display an overview of each widget category to appear above the filtered results when that widget category is selected.
I am assuming this will require a ng-show directive so will perhaps require some controller code too. But any pointers on linking up select dropdown with my ng-repeat and linking up with ng-show would be great.
Here is what I am aiming for:
Before
After
<ion-view title="Select Box Filter" id="page6" class=" ">
<ion-content padding="true" class="has-header">
<ion-list id="tListSelectFilter-list11" class=" ">
<label class="item item-select " id="tListSelectFilter-select1">
<span class="input-label">Select</span>
<select></select>
</label>
<ion-item id="tListSelectFilter-list-item25" class=" ">Widget Range 1</ion-item>
<ion-item id="tListSelectFilter-list-item26" class=" ">Widget Range 2</ion-item>
<ion-item id="tListSelectFilter-list-item27" class=" ">Widget Range 3</ion-item>
</ion-list>
<ion-item ng-repeat="product in products | filter:select" class="item-thumbnail-left item-text-wrap"
href="#/tab/list/{{product.item}}">
<h2>Product Name: {{product.name}}</h2>
<h3>Quantity: {{product.quantity}}</h3>
<h2>Price: £{{product.price}}</h2>
</ion-item>
</ion-content>
</ion-view>
<!--Widget Range 1 Overview Text - Here is an example of the overview text for Widget Range 1 to be produced when this specific dropdown is selected.
Widget Range 2 Overview Text - Here is an example of the overview text for Widget Range 2 to be produced when this specific dropdown is selected.
Widget Range 3 Overview Text - Here is an example of the overview text for Widget Range 3 to be produced when this specific dropdown is selected.-->
https://plnkr.co/edit/0WrinKY2X7Ijq32hBzms
Here would be your ng-repeat
<span>{{description}}</span>
<ion-item ng-repeat="product in products | filter:select"
class="item-thumbnail-left item-text-wrap" ng-click="showDescription(product)" >
<h2>Product Name: {{product.name}}</h2>
<h3>Quantity: {{product.quantity}}</h3>
<h2>Price: £{{product.price}}</h2>
</ion-item>
This would be inside the controller
// description initialized to nothing
$scope.description = '';
$scope.showDescription = function(product) {
$scope.description = product.description;
}
Now this assumes that the description for each product is apart of the product object - just as the name, quantity, and price.
I would create json object array for categories as
$scope.categories = [
{"name":"Category 1", "description": "This is description of category1"}
{"name":"Category 2", "description": "This is description of category2"}
{"name":"Category 3", "description": "This is description of category1"}
]
I will bing this array to create the category list.
<ion-list id="tListSelectFilter-list11" class=" ">
<label class="item item-select " id="tListSelectFilter-select1">
<span class="input-label">Select</span>
<select></select>
</label>
<ion-item id="tListSelectFilter-list-item25" class=" " ng-repeat="c in categories" ng-model="selected.category">
{{c.name}}
</ion-item>
</ion-list>
<span>{{selected.category.description || ""}}</span>
This is how you can do it.
Keep your data as json obj array in controller. This will contain : Select item names and related descriptions.
Keep a place holder in controller for the currently selected option, you can use this too display the information on your page within the controller scope.
P.S : I have done it in simple HTML to show how this can be achieved. In case of any doubts do comment.
var app = angular.module("MyApp", []);
app.controller("MyCtrl", function() {
this.selected = "";
this.data = [{
"name": "Widget 1",
"desc": "Here is an example of the overview text for Widget Range 1 to be produced when this specific dropdown is selected."
}, {
"name": "Widget 2",
"desc": "Here is an example of the overview text for Widget Range 2 to be produced when this specific dropdown is selected."
}, {
"name": "Widget 3",
"desc": "Here is an example of the overview text for Widget Range 3 to be produced when this specific dropdown is selected."
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyCtrl as ctrl">
<select ng-model="ctrl.selected" ng-options="widget.name for widget in ctrl.data">
<option value="">Please select</option>
</select>
<div>{{ctrl.selected.desc}}</div>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
</div>
I am new to angularjs. I am trying to add check boxes into a particular scope.group
Below is the mock-up of what i want to achieve and code.
<accordion close-others="false">
<accordion-group ng-repeat="group in groups" is-open="group.open">
<accordion-heading>
<i ng-class="{'icon-minus-sign':groups[$index].open,'icon-plus-sign':!groups[$index].open }"></i>
<span class="title-pos" >{{group.title}}</span>
</accordion-heading>
{{group.content}}
</accordion-group>
</accordion>
<script>
angular.module('main',['ui.bootstrap'])
.controller('AppCtrl', function($scope){
$scope.groups = [
{
"title":"Series",
"open":true
},
{
"title":"Price Range",
"content":"Content B",
"open":true
},
{
"title":"Engine Type",
"content":"Content C",
"open":false
},
{
"title":"Engine Type",
"content":"Content C",
"open":false
},
{
"title":"Life Style",
"content":"Content C",
"open":false
},
{
"title":"Seats",
"content":"Content C",
"open":false
},
];
})
</script>
I would like to add the check box to Engine type group.
Look forward for any help
Thanks in advance
Replace {{group.content}} with <div ng-bind-html="group.content"></div>
You should then add your checkboxes HTML code inside "content" part of "Engine Type" group, similar to this :
...
{
"title":"Engine Type",
"content":'<input type="checkbox" name="checkbox1" value="Petrol">Petrol',
"open":false
},
...
For each one of the enteries in $scope.groups whatever comes in "content" will appear inside <div ng-bind-html="group.content"></div> block.
Finally, Be sure to add ngSanitize to your module dependencies as in this plunkr
You can add the checkboxes in the content area
<accordion-group ng-repeat="group in groups" is-open="group.open">
<accordion-heading>
<i ng-class="{'icon-minus-sign':groups[$index].open,'icon-plus-sign':!groups[$index].open }"></i>
<span class="title-pos" >{{group.title}}</span>
</accordion-heading>
<div ng-repeat="option in group.options">
<!-- checkbox and text here -->
</div>
</accordion-group>
And reorganize your data to include the checkboxes model
$scope.groups = [
{
"title":"Engine Type",
"content":"Content C",
"open":false,
"options": [
"Petrol", // or if you have id for them: {id:engine_petrol, name:"Petrol"}
"Diesel",
"Hybrid"
]
}
];
I have a repeater with a headline and a description for each item. I want to be able to hide all descriptions at once with the help of a checkbox. This was easily done. Then i want to be able to hide or show each of the descriptions separately too. And i have almost got it working, except for one problem: if i hide all descriptions with the checkbox, and then click on one description to show it nothing happens until i click it a second time.
Is there any way around it?
Here is my code:
<div id="container" ng-app="" ng-controller="myController">
<input type="checkbox" ng-model="MinAllDescriptions" /> <span>Minimize all descriptions</span><br /><br />
<div class="itemContainer" ng-repeat="item in ItemList">
<span class="itemHeadline">{{item.Headline}}</span>
Hide / Show
<div class="itemDescription" ng-hide="MinAllDescriptions || MinThisDescription" ng-show="!MinAllDescriptions || !MinThisDescription">{{item.Description}}</div>
</div>
</div>
<script>
function myController($scope) {
$scope.MinAllDescriptions = false;
$scope.ItemList = [
{Headline: "Item one", Description: "This is item one"},
{Headline: "Item two", Description: "This is item two"},
{Headline: "Item three", Description: "This is item three"},
{Headline: "Item four", Description: "This is item four"},
{Headline: "Item five", Description: "This is item five"}
];
}
</script>
Check out jsfiddle here: http://jsfiddle.net/195k2e9n/1/
Try this - http://jsfiddle.net/7Lbgjvz7/
Html
<div id="container" ng-app="" ng-controller="myController">
<input type="checkbox" ng-click="minimizeAll()" ng-model="MinAllDescriptions" /> <span>Minimize all descriptions</span><br /><br />
<div class="itemContainer" ng-repeat="item in ItemList">
<span class="itemHeadline">{{item.Headline}}</span>
Hide / Show
<div class="itemDescription" ng-hide="item.MinThisDescription">{{item.Description}}</div>
</div>
</div>
Angular
function myController($scope) {
$scope.MinAllDescriptions = false;
$scope.ItemList = [
{Headline: "Item one", Description: "This is item one"},
{Headline: "Item two", Description: "This is item two"},
{Headline: "Item three", Description: "This is item three"},
{Headline: "Item four", Description: "This is item four"},
{Headline: "Item five", Description: "This is item five"}
];
$scope.minimizeAll = function(){
angular.forEach($scope.ItemList, function(item, i){
item.MinThisDescription = !$scope.MinAllDescriptions;
});
}
}
Add an event into checkbox and set $scope.MinAllDescriptions = !$scope.MinAllDescriptions