How do I get nya-bs-select to use a boolean value on the model?
This is in the view:
<ol id="submitted" class="nya-bs-select" ng-model="submitted" ng-true-value="true" ng-false-value="false">
<li class="nya-bs-option" value="true">
<a>Submitted</a>
</li>
<li class="nya-bs-option" value="false">
<a>Not Submitted</a>
</li>
</ol>
Here is the controller:
$scope.submitted=true;
// $scope.submitted="true";
Here is the full plunkr:
https://plnkr.co/edit/iMvRDEr6s9zT6C34gM1y?p=preview
The only way to achieve this is by using an object as option and not a value like in this demo plnkr:
View
<ol class="nya-bs-select" ng-model="myModel">
<li nya-bs-option="option in options">
<a>{{option.name}}</a>
</li>
</ol>
Application
var app = angular.module('plunkerApp', ['nya.bootstrap.select']);
app.controller('MainCtrl', function($scope) {
$scope.options = [
{
value: true,
name: 'TRUE SELECTED'
}, {
value: false,
name: 'FALSE SELECTED'
},
];
});
Related
How to show comments in items?
This is where items save
$scope.items = [
{ 'item': 'one',
'comments':[{'comment':'comment'}]
},
{ 'item': 'two',},
{'item': 'three'}
];
<ul>
<li ng-repeat="ite in items">
{{ite.item}} {{ite.comments.length}}
<button ng click="remove($index)">Remove</button> <div ng-repeat="c in ite.comments">{{c.comment}}</div>
</li>
</ul>
http://plnkr.co/edit/19w1Q3XhoWQcpxm5SuxX?p=preview
You Just missed to add your comment Div in between the list tag. please update the code like above code. I have checked on Plunker.
<li ng-repeat="ite in items">
{{ite.item}} {{ite.comments.length}}
<button ng-click="remove($index)">Remove</button> <div ng-repeat="c in ite.comments">{{c.comment}}</div></li>
I have some code that lists some categories and subcategories with checkboxes but i can not get it to show a which checkboxes have been checked in a nested ul. It does return the selected items but not in a ul list.
please could you show me how to display the selected categories and sub catagories in a nested ul. Thanks.
var ViewModel = function() {
var self = this;
self.selectedCategories = ko.observableArray();
self.selectedItems = ko.observableArray();
self.categories = ko.observableArray([
{ name: 'Hospitality', items: [ 'Bars', 'Caterers', 'Cafes', 'Food To Go', 'Pubs' ] },
{ name: 'Popup', items: [ 'Food Vans', 'Festivals', 'Markets', 'Beer Garden' ] }
]);
}
var viewModel = new ViewModel();
ko.applyBindings(viewModel);
<ul data-bind="foreach: { data: categories, as: 'category' }">
<li> <input type="checkbox" name="level-1" data-bind="checked: $root.selectedCategories, attr: {value: name}"><span data-bind="text: category.name"></span></input>
<ul data-bind="foreach: { data: items, as: 'item' }">
<li><input type="checkbox" name="level-2" data-bind="checked: $root.selectedItems, attr: {value: item}"><span data-bind="text: item"></span></input></li>
</ul>
</li>
</ul>
<div data-bind="text: selectedCategories"></div>
<div data-bind="text: selectedItems"></div>
I'd suggest to store whether a category is selected, and its selected items, in the categories own model. You can make a computed in your ViewModel to create an array with only selected categories. Here's an example:
var ViewModel = function() {
var self = this;
self.categories = ko.observableArray([{
name: 'Hospitality',
items: ['Bars', 'Caterers', 'Cafes', 'Food To Go', 'Pubs'],
selected: ko.observable(false),
selectedItems: ko.observableArray([])
}, {
name: 'Popup',
items: ['Food Vans', 'Festivals', 'Markets', 'Beer Garden'],
selected: ko.observable(false),
selectedItems: ko.observableArray([])
}]);
self.selectedCategories = ko.computed(function() {
return self.categories().filter(function(cat) {
return cat.selected()
});
});
}
var viewModel = new ViewModel();
ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul data-bind="foreach: { data: categories, as: 'category' }">
<li>
<input type="checkbox" name="level-1"
data-bind="checked: selected, value: name">
<span data-bind="text: name"></span>
<ul data-bind="foreach: { data: items, as: 'item' }">
<li>
<input type="checkbox" name="level-2"
data-bind="checked: category.selectedItems, value: item, enable: category.selected">
<span data-bind="text: item, style: { 'opacity' : (category.selected() ? 1 : 0.5)}"></span>
</li>
</ul>
</li>
</ul>
<h2>Selections</h2>
<ul data-bind="foreach: selectedCategories">
<li>
<div data-bind="text: name"></div>
<ul data-bind="foreach: selectedItems">
<li data-bind="text: $data"></li>
</ul>
</li>
</ul>
Note: You had some invalid HTML in your snippet: you can't put a <span> element in an <input> element.
I would like to display a list based on which item is selected in a dropdown.
When I use the code below, I'm getting this error:
TypeError: Cannot read property 'type' of undefined
Any suggestions on how to do this right?
HTML:
<select class="form-control" ng-model="editProject.project.type"
ng-options="project as project.type for project in editProject.options track by project.type">
</select>
<ul class="list-group">
<li class="list-group-item" ng-repeat="benefit in editProject.foods()">{{snack}}</li>
</ul>
Controller:
.controller('EditProjectCtrl', function () {
var editProject = this;
editProject.options = [
{'type': 'Fruits'},
{'type': 'Vegetables'},
{'type': 'Desserts'}
];
editProject.snacks = function() {
if(editProject.project.type == 'Fruits') {return [
'Grapes',
'Oranges',
'Apples',
]}
if(editProject.project.type == 'Vegetables') {return [
'Broccoli',
'Spinache',
'Kale',
]}
else {return [
'Cookies',
'Cake',
'Pie']}
};
You are almost there. There was a mismatch between the ng-model of the select element, and the conditions in the controller. I also replaced benefit in editProject.foods() with snack in editProject.snacks():
<select class="form-control" ng-model="editProject.project" ng-options="project as project.type for project in editProject.options track by project.type"></select>
<ul class="list-group">
<li class="list-group-item" ng-repeat="snack in editProject.snacks()">{{snack}}</li>
</ul>
Because editProject.project is not defined until you select a project, you have to initialize it in the controller:
editProject.project = {};
See fiddle
I have tried to filter blank string item from ng-repeat. But didn't succeeded. Can someone please help me at this.
JSFiddel Link
HTML Code:
<div ng-app ng-controller="myCtrl">
<ul>
<li ng-repeat="detail in details | filter: filter2 ">
<p>{{detail.name}}</p>
</li>
</ul>
</div>
JS Code:
function myCtrl($scope) {
$scope.details = [{
name: 'Bill',
shortDescription: null
}, {
name: 'Sally',
shortDescription: 'A girl'
},{
name: 'Tally',
shortDescription: ''
}];
}
function filter2(detail){
if (item.shortDescription.length == 0){
return true;
}
else{
return false;
}
}
Expected Result:
/*
Expected Result
Bill
Sally
*/
<div ng-app ng-controller="myCtrl">
<ul>
<li ng-repeat="detail in details" ng-if="detail.shortDescription">
<p>{{detail.name}}</p>
</li>
</ul>
</div>
fiddle
My case is as follows - I have a simple page which lists available products:
<ul class="products ng-scope" id="products">
<!-- ngRepeat: tag in products -->
<li ng-repeat="product in products" class="ng-scope">
<a ng-href="/#/viewProduct/1" class="ng-binding" href="/#/viewProduct/1">Product A</a>
</li><li ng-repeat="product in products" class="ng-scope">
<a ng-href="/#/viewProduct/2" class="ng-binding" href="/#/viewProduct/2">Product B</a>
</li><li ng-repeat="product in products" class="ng-scope">
<a ng-href="/#/viewProduct/3" class="ng-binding" href="/#/viewProduct/3">Product C</a>
</li><li ng-repeat="product in products" class="ng-scope">
<a ng-href="/#/viewProduct/4" class="ng-binding" href="/#/viewProduct/4">Product D</a>
</li><li ng-repeat="product in products" class="ng-scope">
<a ng-href="/#/viewProduct/5" class="ng-binding" href="/#/viewProduct/5">Product E</a>
</li>
</ul>
In my angular scenario I want to test if the list of products is equal to expected. I know it can/should be a unit test, but suppose I want an e2e test.
After reading the official docs (http://docs.angularjs.org/guide/dev_guide.e2e-testing - which as usual cover 10% of the subject) and debugging angular code I managed to write the following test:
'use strict';
describe('my app', function() {
var productsList = [
'Product A',
'Product B',
'Product C',
'Product D',
'Product E'
];
it('should list all products', function() {
browser().navigateTo('/#/products');
var foundProducts = element('#products li').query(function(elements, done) {
var productsArray = [];
elements.each(function(index) {
productsArray.push(elements[index].innerText);
});
done(null, productsArray);
});
expect(foundProducts).toEqual(productsList);
});
});
Can anyone please tell me how this can be done easier?
And the second question, why elements[index].text() is undefined - which in fact is a question how to jet a jQuery object out of elements[index].
Found the solutution:
describe('my app', function() {
var productsList = [
['Product A'],
['Product B'],
['Product C'],
['Product D'],
['Product E']
];
it('should list all products', function() {
browser().navigateTo('/#/products');
expect(repeater('#products li').count()).toEqual(productsList.length);
for (var i = 0; i < productsList.length; i++) {
expect(repeater('#products li').row(i)).toEqual(productsList[i]);
}
});
});