Here is my current code.
What I am trying to do is to: generate different content after click each dropdown toggle.
For example, when text is clicked, "Text" shows under the button.
Could someone help me on that?
Thanks in advance!
You have to remove the ng-model from the li element & add a ng-click handler to your a tag. This way you can use the choice that you selected for whatever you want to do with it.
Example: http://plnkr.co/edit/oTHWf2I266SHjur5Ebv8?p=preview
HTML:
<!-- ADD ITEM BUTTON -->
<li class="dropdown">
<button class="btn btn-default dropdown-toggle">Add item</button>
<ul class="dropdown-menu">
<li ng-repeat="choice in items">
<a ng-click="selectItem(choice)">{{choice.type}}</a>
</li>
</ul>
</li>
{{selection}}
JS:
$scope.selection = {};
$scope.selectItem = function(choice) {
$scope.selection = choice;
}
Related
there are multiple panels and sub-panels (DIVs), that i need to show its (panel) controls on click to do specific tasks. The project is cv builder with front-end editing capabilities. So in regard to show/hide panels, my approach is very basic so hoping there would be much better way to getting this done.
Here is HTML Markup
<div class="panel component-about" ng-class="{'active': aboutPanel}" ng-click="activePanelAbout()">
<h2 class="title">Some Title (input)</h2>
<div class="panel-body">
Some text (textarea)
</div>
<div class="panel-hover-controls">
<span class="fa fa-pencil"></span>
<span class="fa fa-cog"></span>
<ul class="panel-dropdown" ng-class="{'active': aboutToggle}">
<li><label class="input-switch"><input type="checkbox" ng-model="aboutTitleShow" ><span class="slider round"></span></label> Show Title</li>
</ul>
</div>
</div>
<div class="panel component-experience" ng-class="{'active': expPanel}" ng-click="activePanelExp()">
<h2 class="title">Some Title (input)</h2>
<div class="panel-body">
<ul class="panel-componenets">
<li ng-repeat>
Title
Content
</li>
</ul>
</div>
<div class="panel-hover-controls">
<span class="fa fa-pencil"></span>
<span class="fa fa-cog"></span>
<ul class="panel-dropdown" ng-class="{'active': aboutToggle}">
<li><label class="input-switch"><input type="checkbox" ng-model="aboutTitleShow" ><span class="slider round"></span></label> Show Title</li>
</ul>
</div>
</div>
<div class="panel component-skills" ng-class="{'active': skillsPanel}" ng-click="activePanelSkills()">
<h2 class="title">Some Title (input)</h2>
<div class="panel-body">
<ul class="panel-dropdown" ng-class="{'active': aboutToggle}">
<li><label class="input-switch"><input type="checkbox" ng-model="aboutTitleShow" ><span class="slider round"></span></label> Show Title</li>
</ul>
</div>
<div class="panel-hover-controls">
<span class="fa fa-pencil"></span>
<span class="fa fa-cog"></span>
<ul class="panel-dropdown" ng-class="{'active': aboutToggle}">
<li><label class="input-switch"><input type="checkbox" ng-model="aboutTitleShow" ><span class="slider round"></span></label> Show Title</li>
</ul>
</div>
</div>
Further please check markup figure in (below) screenshot.
In reference to attached screenshot, there are multiple panel sections and most of panels also have sub-panels and each panel has its own control type which need to be show on click.
Here is JS (Controller)
// for setting popups
$scope.aboutToggle = false;
$scope.expToggle = false;
$scope.skillToggle = false;
// about panel
$scope.activePanelAbout = function() {
$scope.aboutPanel = true;
$scope.expPanel = false;
$scope.skillPanel = false;
}
// experience panel
$scope.activePanelExp = function() {
$scope.aboutPanel = false;
$scope.expPanel = true;
$scope.skillPanel = false;
}
// skill panel
$scope.activePanelSkill = function() {
$scope.aboutPanel = false;
$scope.expPanel = false;
$scope.skillPanel = true;
}
Now i think the picture should be clear. The panels are toggling actually, but i require more better approach something like this that we use to do in javascript/jquery.
I hope i have covered all aspects of my question, if not please do guide me so i can clarify myself. I'm looking forward for your guidance.
Thanks in advance.
this in AngularJS ends up a bit different than plain old JS. Since a controller contains its own $scope in relation to the DOM of which the controller is instantiated, this doesn't always refer to the object that calls a function, etc. So I can think of two options:
First maybe simplify how you're changing the active class for each panel and it's children. So maybe just:
$scope.activePanel = "";
$scope.ChangeActivePanel = function(newPanel) {
$scope.activePanel = newPanel;
}
And then change the ng-class for each panel to ng-class="{'active': activePanel == 'about'}" or ng-class="{'active': activePanel == 'skills'}", etc. Then change ng-click on the panels to ng-click="ChangeActivePanel('about')" or whatever to update the variable. In all honesty, just ng-click="activePanel = 'about'" would work but the ChangeActivePanel function could be expanded to handle behavior of the children panel elements as well. Just a thought rather than having three different functions and toggling all of these variables.
Second option is to create controllers for each panel by declaring ng-controller="aboutController" or ng-controller="skillsController" to each panel and then each panel would have it's own $scope but you'll have to declare and attach each controller to the app module and you'll run into headaches if you need to share data across controllers and will have to use factories/services, etc. I think that's overkill for something like this. Plus, it's difficult to manage which $scope is which across multiple controllers within the same view.
Hopefully this gives you something to work with.
I have a loop ng-repeat that displays sevral icons.
<div class="box">
<div class="box-body">
<div class="row" >
<div class="col-sm-6" style="margin-bottom: 5px;" ng-repeat="record in newlayout.display" align="center">
<a class="btn btn-app" ng-href="#newlayout/{{newlayout.url}}{{newlayout.itemValue}}" >
<span class="badge bg-yellow" style="font-size:22px;">{{record.numberOfSamples}}</span>
<i class="fa fa-{{newlayout.labStyle}}"></i> {{record.lab}}
</a>
</div>
</div>
</div>
</div>
My issue is that the second part of the binded variable itemValue should be dynamic
In my Js, I have this
newLayout.url = 'sublabs/?labName=';
newLayout.itemValue = 'record.lab';
The URL is dynamic.
When I click on the first displayed Icon, the url should look like this :
But it didn't work as I had a compilation error..
Does someone have an idea how to fix this:
http://localhost:8181/#/newlayout/sublabs?labName=PIA/C1 - Shiftlabo
Where the record value "PIA/C1 - Shiftlabo" change.
So basically here if I change
<a class="btn btn-app" ng-href="#newlayout/{{newlayout.url}}{{newlayout.itemValue}}" >
{{newlayout.itemValue}} by {{record.lab}} it would work..but the {{record.**lab**}} should be dynamic as it will have another value when I click on the icon. It will change to {{record.subLab}}
Thanks
Use property acccessor bracket notation inside the binding:
<div>{{record[labOrSublab]}}</div>
JS
var isSublab = false;
$scope.labOrSublab = "lab";
$scope.clickHandler = function() {
isSublab = !isSublab;
$scope.labOrSublab = isSublab ? 'subLab' : 'lab';
};
I would like to have two menus, where the choice in the first menu sets the options in the second menu. This is to be done on a Salesforce VisualForce page that is using Angular JS and specifically the UI-Grid module for it. Similar controls are using the Angular button classes for menus, but I don't see how to dynamically set the choices using a button.
My current design is using a select control and ng-options.
In the controller.js I have declared variables to be used by the menus and a function to swap out the array values for the second menu. Note that $scope.fieldOptions is set through a query to Salesforce to pull option values from quicklist fields. This array is used in the UI-Grid filter option that accepts in a format like "[ { value: '1', label: 'male' }, { value: '2', label: 'female' }...".
$scope.editRows = 'all';
$scope.editField = 'Program';
$scope.editValue;
$scope.editOptions = {};
$scope.setEditOptions = function(editField) {
switch (editField) {
case "Program" :
$scope.editOptions = $scope.fieldOptions.Program_Enrolled__c;
break;
case "Appl. ASSET" :
$scope.editOptions = $scope.fieldOptions.Applied_for_ASSET__c;
break;
case "4 Year Degree" :
$scope.editOptions = $scope.fieldOptions.Has_Student_Completed_4_Year_Degree__c;
break;
}
}
On the VisualForce page I have the buttons defined in a button group with the select control just after.
<div class="row" style="margin-bottom:10px;">
<div class="col-md-12">
<div class="btn-group">
<div class="btn-group" dropdown="true" dropdown-append-to-body="true">
<button class="btn btn-default dropdown-toggle" dropdown-toggle="true" type="button">
{{editRows | capitalize}} Rows <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-click="editRows = 'all'">All Rows</li>
<li ng-click="editRows = 'visible'">Visible Rows Only</li>
<li ng-click="editRows = 'selected'">Selected Rows Only</li>
</ul>
</div>
<div class="btn-group" dropdown="true" dropdown-append-to-body="true">
<button class="btn btn-default dropdown-toggle" ng-click="setEditOptions(editField)"
dropdown-toggle="true" type="button">
{{editField | capitalize}} <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-click="editField = 'Program'">Program Enrolled</li>
<li ng-click="editField = 'Appl. ASSET'">Applied for ASSET</li>
<li ng-click="editField = '4 Year Degree'">4-year degree?</li>
</ul>
</div>
<div>
<select ng-model="editValue" ng-options="option.label for option.value in selectOptions">
</select>
</div>
</div>
<button id="split-button" type="button" class="btn btn-default" ng-click="massUpdate()">Modify</button>
</div>
</div>
Am I on the right track? If there is an easier method, or one that would use a button menu directly, please feel free to offer suggestions. Otherwise, is the issue how I am using ng-options?
Okay, easier than I thought. Two typos. First, I had the array declared with {} instead of []. And I misspelled it in the select statement ng-options section. Fixed that and it's working.
If anyone knows any tricks to get this working with a button so it would match the others though, that would be wonderful. Otherwise I'm thinking I'll go with all selects for consistency. Also, maybe bundle these options into an array with the primary menu choices as the keys so I can just reference without the case statement.
$scope.editRows = 'all';
$scope.editField = 'Program';
$scope.editValue;
$scope.editOptions = {};
I'm using angular 1.4.8. I want to save filtered result from ng-repeat and use it to determine whether to enable a "load more" button at the bottom of the list. I have looked at this question:
AngularJS - how to get an ngRepeat filtered result reference
And many others, they suggest to use "as alias" from ng-repeat, here's what my code looks like:
<ul class="media-list tab-pane fade in active">
<li class="media">
<div ng-repeat-start="item in items | limitTo: totalDisplayed as filteredResult">
{{item}}
</div>
<div class="panel panel-default" ng-repeat-end>
</div>
<div>
{{filteredResult.length}}
</div>
</li>
</ul>
<button ng-click="loadMore()" ng-show="totalDisplayed <= filteredResult.length">
more
</button>
However, I found filteredResult.length is displayed fine right after ng-repeat, but the button is never shown. If I try to display filteredResult.length in where the button is, it will show null.
So is there a rule for "as alias" scope? I've seen plenty of examples work but mine doesn't, what am I missing here?
EDIT:
The accepted answer uses controllerAs which indeed will resolve the problem. However, charlietfl's comment using ng-init to save filteredResult to parent scope is also very neat and that's the solution I use in my code eventually.
Probably some of classes in your <ul class="media-list tab-pane fade in active"> or <li class="media"> is selector for a directive that would have its own scope. So you store filteredResult in e.g. tab-pane's scope and then try to have access out of it's scope in outside of ul tag.
Try to use Controller as instead of scope:
angular
.module('plunker', [])
.controller('MainCtrl', function() {
vm = this;
// make an array from 1 to 10
var arr = [];
while (arr.length < 10) {
arr.push(arr.length + 1)
};
vm.items = arr;
vm.totalDisplayed = 5;
vm.filteredResult = [];
});
<body ng-controller="MainCtrl as main">
{{main.items}}
<ul class="media-list tab-pane fade in active">
<li class="media">
<div ng-repeat-start="item in main.items | limitTo: main.totalDisplayed as filteredResult">
{{item}}
</div>
<div class="panel panel-default" ng-repeat-end>
</div>
<div>
filteredResult = {{main.filteredResult = filteredResult}}
</div>
</li>
</ul>
<button ng-click="loadMore()" ng-show="main.totalDisplayed <= main.filteredResult.length">
more
</button>
</body>
http://plnkr.co/edit/drA1gQ1qj0U9VCN4IIPP?p=preview
The following code display all the divs one after another :
<ul class="record">
<li id="{{record.id}}" ng-repeat="record in records">
<div> Widget Code.... </div>
</li>
</ul>
Apart from this I have following clickable list menu at the right side in a drop down fashion :
<li ng-repeat="choice in items">
{{choice}}
</li>
Now on click of each list item i want to add the same <div> Widget Code.... </div> which append the existing divs on the page.
My recent view is as following now i want to add div on click of each of list item just after the existing divs.
Need Help. Thank you.
This should do the trick:
<li ng-repeat="choice in items">
{{choice}}
</li>
And then in your controller:
var addRecord = function(){
$scope.records.push({id: 10}); // change to generate your own id
};