I am using AngularStrap checkbox button where checkbox items come from server. So, I am trying to use ng-repeat, but I am not able to see the values of the item selected. Please see the plunker where I have 3 types of checkboxes in it -
A regular checkbox and it works.
Bootstrap checkbox using ng-repeat. It does not reflect selected object values.
Bootstrap checkbox where items are repeated. It works.
Please help me to fix #2 above where I am using ng-repeat option.
Get rid of the extra tag around the button element:
http://plnkr.co/edit/jRIedNZdqZ4phdDk21Vw?p=preview
<div class="btn-group" bs-buttons-checkbox>
<button ng-repeat="item in items" type="button" class="btn" ng-model="selection.ids[item.id]">{{item.name}}</button>
</div>
Related
We have a section of our website where users can submit data. This section allows users to add additional entries and submit them all at once. We had to rewrite this section after we updated the version of AngularJS the site used to the most recent. When a user first accesses the page, the first entry is ready and available for the user to fill out. They can click on a button and it will add another entry. These entries can be navigated via tabs. Once a second entry has been added and a radio button selected, the selected radio button on the first entry is deselected in the view. If you go back to the first entry and re-select a radio button, any selected radio button on the second entry is de-selected. Checking the model, the values are still stored and if the user saves, then the correct values are saved to the database. I don't know if it matters in this case, but the radio button options are populated via data from the database. Everything in the controller appears to be working correctly.
Here is a concentrated bit from the template:
<uib-tabset active="activeTabIndex" ng-show="!nothingToShow && showThisStuff">
<uib-tab ng-repeat="entry in things.items" active="{{entry.active}}" ng-model="entry">
<uib-tab-heading>Heading Here</uib-tab-heading>
<div>
<!-- some other stuff here -->
<div>
<label>Label Here</label>
<br />
<div ng-repeat="input in inputTypes">
<input name="inputTypes" type="radio" data-ng-value="input.theTypeId" ng-model="entry.theTypeId">
<label>{{input.localizedName | translate}}</label>
</div>
</div>
<!-- More stuff here-->
</div>
</uib-tab>
</uib-tabset>
I have a feeling that I'm not doing something right since ng-repeat is involved, but I feel that since the selection points to entry that multiple entries should be isolated from each other. Very well could be wrong, though.
Here's a list of things I've looked at to try and resolve this issue:
AngularJS - ng-repeat multiple radio button groups, values to array
AngularJS - Using ng-repeat to create sets of radio inputs
AngularJs: Binding ng-model to a list of radio buttons
AngularJS multiple radio options
Selected value in radio button group not retained in angularjs
How can I get the selected values of several radio buttons to be bound to an object (model)?
If I understand you correctly, you try to set multiple selection instead of single selection, do you?
Try one of the following: either remove the 'name' attribute from the input, or use $index in order to give every input its unique name (example: name="inputTypes_{{$index}}").
I'm using ui.bootstrap.datepickerPopup in a filter header template inside ui.grid. This lets me filter rows by date. I also have a button inside the grid menu that toggles grid.options.enableFiltering.
Due to alignment issues with ui-grid, I have datepicker-append-to-body set to true for my datepickers. The first time I enable filtering, everything works fine. However, when I disable filtering and re-enable it, I get duplicate datepickers.
This is what the problem looks like:
I think the problem is that each time the filters are enabled, the following div is appended to the DOM and never removed when the filters are disabled.
<div uib-datepicker-popup-wrap=""
ng-model="date"
ng-change="dateSelection(date)"
template-url="uib/template/datepickerPopup/popup.html"
class="ng-pristine ng-untouched ng-valid ng-scope ng-empty ng-valid-date-disabled"
>
<!-- ngIf: isOpen -->
</div>
Here's a simplified plunker: http://plnkr.co/edit/eYZt87j2O6A5xhjHj5ZG
I get the same issue if I only use one datepicker inside the Time Range filter header.
Any ideas are greatly appreciated! Don't want to use jQuery.
I don't have an answer on why this is happening but a solution without jQuery would be to remove the pop-up when triggering the filter toggle using document.querySelectorAll()
var elements = document.querySelectorAll("div[uib-datepicker-popup-wrap]");
Array.prototype.forEach.call(elements, function(node) {
node.parentNode.removeChild(node);
});
Plunker here
I want to add a text-box to the top of the dropdown list that appears when a select-box is clicked.
This way, I can filter and select a value.
Can this be done in devExpress?
I know that the template for each individual value can be modified by using dx-template, but can the dropdown list as a whole be modified (i.e. a text-box be added to the top for filtering)?
<div dx-select-box="vm.account1BoxConfig">
<div data-options="dxTemplate:{ name:'accountItem' }">
<span dx-text-box="{value: 'Mike'}"></span> // not working -- adds text-box to each value
<span>{{::code}}</span>
<small style="margin-left: 5px">[{{::name}}]</small>
</div>
</div>
By the way, I don't want to type text in the select-box element - only in a text-box at the top of the drop-down.
-- I know the select-box element can be used to type filter/search text-.
The only other option I can think of is to create a dx-list and toggle it when the input element is clicked....
I suggest you use dxLookup instead. It provides a search box in the drop-down out-of-the box. See the http://js.devexpress.com/Demos/WidgetsGallery/#demo/actions_and_lists-lookup-overview demo.
I am creating a dynamic radio buttons and checkboxes .But when enter their labels how can we have a validation so that no name is repeated again for next controls respectively
<span style="padding-left: 20px" ng-repeat="r in field.rbtn track by $index | unique:'r.radioname'" >
<input type="radio" id="radio_{{$index}}">{{r.radioname}}
</span>
For this I have used like this..but it does not displaying the values only the label is displayed but under it ,no radio button with its name is not displaying
I am sure you are using ng-repeat for dynamically generating checkboxes.
You can use the Angular unique filter for removing duplicates in your ng-repeat.
I am transitioning from jquery to angularjs. I am trying to develop a small app in SPA style. Left side is the menu that controls the content on the right side. Left side menu has its own controller. When the user selects a checkbox and clicks on 'Go', the checkbox value should be passed to the controller that controls the right side content. Here is the link to the app. Below are the issues I have.
1)I am stumped on a simple problem of accessing checked values of a checkbox. How do I access values of checked checkboxes. The checboxes are on left side menu, and I am using ng-model to currently access the values as below
index.html
<div id="searchOne">
<ul>
<li ng-repeat="searchOneCB in main.checkBoxOneData">
<input type="checkbox" name="firstSearch" id="firstSearch_{{searchOneCB.code}}" ng-model="main.selected[searchOneCB.code]" />
{{searchOneCB.description}}
</li>
</ul>
<button class="btn btn-primary" style="width:80px;margin-right: 10px" ng-click="main.submit()">
Go
</button>
</div>
MainCtrl.js to access the checkbox value.
main.submit = function() {
console.log(main.selected);
}
The values are now in the form of an array as below
[BBBB: true, AAAA: true].
Is this the right way to access the values? What is the best way to retrieve only the checked checbox values?
2) Another question is, once I get the list of checked checkboxes values, how can I pass them to the contentCtrl.js that controls the content on right side?
You should inject the controller into the controller you want to use. The answer has already been answered here is the link.
How do I inject a controller into another controller in AngularJS