I have created a filter with different check box options using ng-repeat. I am trying to add a select all check box however I am receiving a few errors. Below is the html and code:
<accordion>
<accordion-group is-open="group.open">
<accordion-heading>
<i ng-class="{'icon-minus-sign':series[0].open,'icon-plus-sign':!series[0].open }"></i>
<span class="title-pos" >{{series[0].title}}</span>
</accordion-heading>
<div class="filertType" ng-repeat="chk in series[0].content">
<input type="checkbox" id="{{ 'c' + $index }}" name="cc" />
<label for="{{ 'c' + $index }}"><span></span> {{chk.text}}</label>
</div>
</accordion-group>
</accordion>
angular.module('main',['ui.bootstrap'])
.controller('AppCtrl', function($scope){
$scope.series = [
{
"title":"Series",
"content": [{"text":"Select All"},
{"text":"1 Series"},
{"text":"2 Series"},
{"text":"3 Series"},
{"text":"4 Series"},
{"text":"5 Series"},
{"text":"6 Series"},
{"text":"7 Series"},
{"text":"X Series"},
{"text":"Z Series"},
{"text":"M Series"},
{"text":"Hybrid"}],
"open":true
}
];
Off the top of my head, I think you can add ng-checked="allSelected" to each checkbox in your ng-repeat loop. Next, add your new "select all "checkbox somewhere that has an ng-model="allSelected"
edit
Here is a fiddle, same approach: http://jsfiddle.net/Lr8rdr4c/
<body ng-app="TestApp">
<div ng-controller="TestController">
<div ng-repeat="checkbox in checks">
<input type="checkbox" ng-checked="allSelected"/>{{checkbox}}
</div>
<button ng-click="toggleChecks()">Select All</button>
</div>
</body>
The JS
var app = angular.module('TestApp',[]);
app.controller('TestController',function($scope)
{
$scope.checks = ['test 1','test 2','test 3'];
$scope.toggleChecks = function()
{
$scope.allSelected = !$scope.allSelected;
};
});
Related
I am changing the UI code from bootstrap to material. I am using angularjs and material 1.1.20. I do not know angularjs but would like to learn. Please see the code I need to change to angularjs material below.
I know that md-select does not accept ng-options, but I do not have any idea how I can change it to work with md-select tag.
My background is designing HTML CSS but I want to learn more js and angular etc.
<div class="col-md-12 col-no-pad">
<div class="input-group">
<span class="input-group-addon" id="LANGUAGE">Language</span>
<select name="LANGUAGE" class="form-control" tabindex="8"
ng-init="LANGUAGE = null"
ng-model="LANGUAGE"
ng-options="language.KEYID as language.DESC for language in languages">
<option value="">-Select One-</option>
</select>
</div>
js:
dataService.getAll('language').then(function(data) {
$scope.languages = data.data;
});
I want it to work as an angularjs material dropdown.
You need to use ng-repeat on <md-option>. Check the snippet below.
angular.module('myApp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.languages = [{
desc: 'English',
keyid: 1,
position: 5
}, {
desc: 'Italian',
keyid: 2,
position: null
}, {
desc: 'Spanish',
keyid: 3,
position: 43
}, {
desc: 'Malayalam',
keyid: 4,
position: 8
}];
});
md-input-container {
min-width: 50%;
}
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<div ng-app="myApp" ng-cloak ng-controller="AppCtrl as ctrl">
<md-input-container>
<label>Languages</label>
<md-select ng-model="languageSelected">
<md-option ng-repeat="item in languages" ng-value="item.keyid">
{{ item.desc }}
</md-option>
</md-select>
</md-input-container>
<div>Your selection: {{ languageSelected || '--' }}</div>
<div ng-repeat="item in languages" ng-if="item.keyid == languageSelected">
<div>desc: {{ item.desc || '--' }}</div>
<div>position: {{ item.position || '--' }}</div>
<div>keyid: {{ item.keyid || '--' }}</div>
</div>
</div>
I am presenting a simple yes/no answer question to my users and I want to have a default radio button selected. The problem is that I could have any number of these questions presented to the user.
This is my code:
<div ng-form ng-repeat="i in offers track by $index" name="messageForm[$index]">
<div data-ng-repeat="option in closeListingOptions" class="radio">
<label>
<input type="radio" name="close" ng-model="i.close" value="{{option.id}}" ng-checked="option.checked" />{{option.name}}</strong>
</label>
</div>
</div>
My options are set as follows:
$scope.closeListingOptions = [
{
id: "1",
name: "Yes please",
checked: true
},
{
id: "0",
name: "No thanks",
checked: false
}
];
The above example works and check/sets "yes" as the default answer. However unless I manually select an option via a mouse click the value is not binding to the model.
I have read that ng-select should not be used with ng-options but i am not sure how else I can achieve this goal? It seems that I need something like:
i.close = "1":
But how can I set this for an unknown quntity since I don't know how many question will be presented?
1- Instead of value={{something}} you can use ng-value directive.
2- Each input pack should have its specific name.
Here is a working example:
var app = angular.module("app", []);
app.controller("MainCtrl", function($scope) {
$scope.offers = [{
number: 1
},
{
number: 2
}
];
$scope.closeListingOptions = [{
id: "1",
name: "Yes please",
checked: true
},
{
id: "0",
name: "No thanks",
checked: false
}
];
});
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-form ng-repeat="i in offers" name="messageForm[$index]">
<div data-ng-repeat="option in closeListingOptions" class="radio">
<label>
<input type="radio" name="close-{{i.number}}" ng-model="i.close" ng-value="option.id" ng-checked="option.checked" />{{option.name}}</strong>
</label>
</div>
{{i}}
<hr>
</div>
</body>
</html>
You should try this:
<input type="radio" name="close"
ng-model="option.checked" value="{{option.id}}"
ng-checked="option.checked" />{{option.name}}</strong>
This ng-model will updated the checked key of your data array and then you can fetch all the radio button selection as per their ids from that single variable.
Hope this helps.
I was able t achieve my goal with the following:
<div data-ng-repeat="option in closeListingOptions" class="radio" ng-init="i.closeListing = 1">
<label>
<input type="radio" name="close-{{i.id}}" ng-model="i.closeListing" ng-value="{{option.id}}" />
<strong>{{option.name}}</strong>
</label>
</div>
The solution was to use ng-init
I want to update my view(an input form) to add products to database. For a single product I am able to add it by making it into an array, but now I want to add multiple products and with the click of a button "Add more Product", a similar view(form) is to be generated below the existing form, and this can go on multiple times(to be determined at run time). Now I have two problems:
1. How to update my view with every (Add more Product)button click. Is it done by maintaining some count?
2. How to add multiple product values from each of the forms into the the array of object.
$scope.onClick = function () {
$scope.productData =
{
name: $scope.name,
description: $scope.description,
price: $scope.price,
image: $scope.image,
tags: $scope.tags,
partner_id: $scope.partner_id,
};
}
Example Code
There are a ton of ways to do this. I made this sample plunker that shows a simple option of toggling a form div, adding data in the form, then pushing the resulting form object to the primary products array.
EDIT: I refactored my plunk and snippet to use a Javascript class and constructor. Cloning a master object as shown below is another way to perform this task.
https://embed.plnkr.co/IsNifSaF8jE7oOog29dK/
(See the full snippet at the bottom of this answer.)
Explanation
In your code, you are using $scope on all of your object properties. What you should actually do is create one top-level scope array that is the result of your products retrieval from the server. I would actually create a JavaScript constructor / class that matches the product object you need in the database (for brevity, I just created a "master" object and a cloned "newProduct" object to make edits to):
// Sample Product Object
$scope.newProduct= {
name: "",
description: "",
price: 0.00,
image: "",
tags: [],
partner_id: 0
};
You can bind your $scope.newProduct object to the form with ng-model.
<!-- ==== Simplified Form ==== -->
<form class="form" ng-submit="submitNewProduct()">
<div class="form-group">
<label>Product Name: </label>
<input class="form-control" type="text" ng-model="newProduct.name" >
</div>
<input type="submit" class="btn btn-info" />
</form>
Now when you submit the new product data, you can manipulate it however you need to in the controller (via the $scope.submitNewProduct() function). Once the object is successfully inserted into your database and you're done manipulating the data, you can push the finalized "new product" object into the products array. AngularJs will update the view for you (bound objects via ng-model are being watched for changes) once you add the new product to the array:
// If server update is successful, add new product to products array
$scope.products.push($scope.newProduct);
If you aren't using a constructor, just make sure to note that I reset the $scope.newProduct object back to default values so it doesn't carry over any new changes when you open the new product form again.
// Reset placeholder product
$scope.newProduct = $scope.masterProduct;
Helpful Resources
Tutorial Vids: https://youtu.be/MzqkIZLkBsU
Javascript Constructors: https://www.w3schools.com/js/js_object_constructors.asp
ngRepeat Examples: https://www.w3schools.com/angular/ng_ng-repeat.asp
Snippet
(function() {
"use strict";
var app = angular.module("myApp", []);
app.controller("myController", myController);
myController.$inject = ["$scope", "$timeout", "$filter"];
function myController($scope, $timeout, $filter) {
$scope.loading = false;
class Product {
constructor(_name, _description, _price) {
this.id = this.getNewId();
this.name = _name;
this.description = _description;
this.price = _price;
this.image = "https://www.thesweetexplosion.co.uk/wp-content/uploads/2013/06/product-placeholder.jpg";
this.tags = [];
this.partner_id = 0;
}
getNewId() {
var latestId = $scope.products[$scope.products.length - 1].id
return latestId + 1;
}
}
// Pretending we received these products received from the database...
$scope.products = [{
id: 0,
name: "product_1",
description: "product_1 description",
price: 52.23,
image: "https://raspberrypi.dk/wp-content/uploads/2014/07/raspberry-pi-model-b-plus1.png",
tags: [],
partner_id: 345214967
}, {
id: 1,
name: "product_2",
description: "product_2 description",
price: 46.23,
image: "https://modtronix.com.au/wp-content/uploads/enc-rpi3-official_bottom_ll-100x100.jpg",
tags: [],
partner_id: 514852924
}];
// Add new Products by using this base object
$scope.placeholderProduct = {
id: 0,
name: "",
description: "",
price: 0.00,
image: "https://www.thesweetexplosion.co.uk/wp-content/uploads/2013/06/product-placeholder.jpg",
tags: [],
partner_id: 0
};
$scope.createNewProduct = function(){
$scope.newProduct = new Product("", "", 0);
}
$scope.submitNewProduct = function() {
// DO SERVER UPDATING HERE
// Show loading
$scope.updating = true;
// Simulate server update
$timeout(function() {
// If server update is successful, add new product to products array
$scope.products.push($scope.newProduct);
// Reset submit button
$scope.updating = false;
// Reset placeholder product
$scope.newProduct = {};
// Hide products form
$scope.addProductForm = false;
}, 1000);
}
}
})();
.productImg {
width: 50px;
height: 50px;
}
.prodForm {
margin-top: 15px;
margin-bottom: 15px;
;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="jumbotron text-center">
<h3>AngularJS (1.3.1) - Instantiating Products with ES6 Class Constructor</h3>
</div>
</div>
</div>
<!-- New Product Form - Toggled with addProductForm -->
<div class="col-xs-12">
<button type="button" class="btn btn-sm btn-success" ng-click="createNewProduct(); addProductForm = !addProductForm" ng-show="!addProductForm">
<span class="glyphicon-plus"> Add New Product</span>
</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="addProductForm = !addProductForm" ng-show="addProductForm">
<span>Clear</span>
</button>
</div>
<div class="col-xs-12 well prodForm" ng-show="addProductForm">
<form class="form" ng-submit="submitNewProduct()">
<div class="form-group">
<label>Product Name: </label>
<input class="form-control" type="text" ng-model="newProduct.name" >
</div>
<div class="form-group">
<label>Description: </label>
<input class="form-control" type="text" ng-model="newProduct.description" />
</div>
<div class="form-group">
<label>Price: </label>
<input class="form-control" type="number" min="0.01" step="0.01" ng-model="newProduct.price" format="currency" />
</div>
<div class="form-group">
<label>Partner Id: </label>
<input class="form-control" type="number" ng-model="newProduct.partner_id" />
</div>
<input type="submit" class="btn btn-info" ng-show="!updating" />
<button type="button" class="btn btn-info" ng-show="updating"><i class="fa fa-spinner fa-spin"></i> Updating...</button>
</form>
</div>
<!-- Primary Products Table -->
<div class="col-xs-12">
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>Image</th>
<th>Tags</th>
<th>Partner Id</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in products track by $index">
<td>{{ product.name }}</td>
<td>{{ product.description }}</td>
<td>{{ product.price | currency }}</td>
<td>
<img class="productImg" ng-src="{{ product.image }}" alt="{{ product.name }} img" />
</td>
<td>{{ product.tags }}</td>
<td>{{ product.partner_id }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Currently I have a JSON file look like this:
[
{
"name":"Bánh bao nướng phô mai thịt",
"image":"banhbaonuongphomaithit",
"howtocook":"<h1>abc<\/h1>",
"video":"sY6bswxfVGM",
"category": "bakery"
},
{
"name":"Cháo móng giò hạt sen",
"image":"chaomonggiohatsen",
"howtocook":"Sample",
"video":"24vqCAXlQ0w",
"category": "appetizer"
},
{
"name":"Bánh mì chà bông nhân trứng muối",
"image":"banhmichabongnhantrungmuoi",
"howtocook":"Sample",
"video":"HhMj6jDIQrY",
"category": "bakery"
},
{
"name":"Cà chua muối kiểu kim chi",
"image":"cachuamuoikieukimchi",
"howtocook":"Sample",
"video":"aOYlyEiV3HQ",
"category": "appetizer"
}
]
This is my JS
var pageControllers = angular.module('pageControllers', [])
.config(function($sceProvider) {
// Completely disable SCE. For demonstration purposes only!
// Do not use in new projects or libraries.
$sceProvider.enabled(false);
});
;
pageControllers.controller('HomeController', ['$scope', '$http', function($scope, $http) {
$http.get('js/foods.json').success(function(data) {
$scope.games = data;
});
}]);
And HTML
<div class="row"> <!--First row-->
<div class="col-xs-12 col-sm-4 col-lg-3" ng-repeat = "item in games | filter: query">
<img ng-src="img/foods/{{item.image}}.png" alt="{{item.name}}">
<div class="caption">
<h5 class="text-center" ng-model="foodname">{{item.name}}</h5>
<form name="uploadItem" ng-submit="addFavorite()" novalidate ng-controller = "UploadController" ng-show = "currentUser" ng-controller = "RegistrationController">
<div class="form-group">
<input type="text" name="name" class="form-control" ng-model="foodname" ng-init="foodname='{{item.name}}'" value="{{item.name}}" >
</div>
<button type="submit" class="btn btn-block" style="background-color: #FF4500">Add to favorite</button><br>
</form>
</div>
</div><!--End of first row-->
</div>
And I want to display every records filter by category, for example when I filter appetizer or making it in a category page, all records that have appetizer category should displayed. I've though about reorganize the JSON file but still do not know how to filter it.
You should use .then and access data property
pageControllers.controller('HomeController', ['$scope', '$http', function($scope, $http) {
$http.get('foods.json').then(function(data) {
$scope.games = data.data;
});
}]);
DEMO
Add a search box to filter results by a property say 'category' as :
<input type="text" ng-model="query.category" placeholder="Search by category"/>
In this, the ng-model="query.category" would filter the ng-repeat="item in games | filter: query " on the category type
DEMO
angular.module('pageControllers', []).controller('HomeController', ['$scope', function($scope) {
$scope.games = [{
"name": "Bánh bao nướng phô mai thịt",
"image": "banhbaonuongphomaithit",
"howtocook": "<h1>abc<\/h1>",
"video": "sY6bswxfVGM",
"category": "bakery"
},
{
"name": "Cháo móng giò hạt sen",
"image": "chaomonggiohatsen",
"howtocook": "Sample",
"video": "24vqCAXlQ0w",
"category": "appetizer"
},
{
"name": "Bánh mì chà bông nhân trứng muối",
"image": "banhmichabongnhantrungmuoi",
"howtocook": "Sample",
"video": "HhMj6jDIQrY",
"category": "bakery"
},
{
"name": "Cà chua muối kiểu kim chi",
"image": "cachuamuoikieukimchi",
"howtocook": "Sample",
"video": "aOYlyEiV3HQ",
"category": "appetizer"
}
]
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div class="row" ng-app="pageControllers" ng-controller="HomeController">
<!--First row-->
<input type="text" ng-model="query.category" placeholder="Search by category"/>
<br> <br> <br>
<div class="col-xs-12 col-sm-4 col-lg-3" ng-repeat="item in games | filter: query ">
<img ng-src="img/foods/{{item.image}}.png" alt="{{item.name}}">
<div class="caption">
<h5 class="text-center" ng-model="foodname">{{item.name}}</h5>
<form name="uploadItem" ng-submit="addFavorite()" novalidate ng-show="currentUser">
<div class="form-group">
<input type="text" name="name" class="form-control" ng-model="foodname" ng-init="foodname='{{item.name}}'" value="{{item.name}}">
</div>
<button type="submit" class="btn btn-block" style="background-color: #FF4500">Add to favorite</button><br>
</form>
</div>
</div>
<!--End of first row-->
</div>
Thank for your kindness.
I found a way to filter the data in JSON file by category, i just need to put filter: {category:'bakery'} in the ng-repeat
ng-repeat = "item in foods | filter: query | filter: {category:'bakery'}"
I am fetching data from API and I need a searchable dropdown so that when I start typing it shows me the data coming from the API. Currently I have this piece of code.
<select class="formControl" name="repeatSelect" id="repeatSelect" ng-model="facilitiesData.business_id">
<option ng-repeat="option in businesses" value="{{option.id}}">{{option.business_name}}</option>
</select>
Thanks.
Probably you are looking for this. This could be one of the solution.
This has different type of typeaheads. You can pick one as per your needs.
<input type="text" ng-model="customPopupSelected" placeholder="Custom popup template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control">
Note - You will require a library ui-bootstrap-tpls which is officially created by AngularJS team.
Try this. you cannot directly put textbox inside option and filter select based on it. but this is one way that you can don so. another way is to use plugin or angular material design.
// Angular
var myApp = angular.module('app', []);
myApp.controller('ListCtrl', function($scope) {
$scope.items = [{
'name': 'Item 1'
}, {
'name': 'Item 2'
}, {
'name': 'Account 3'
}, {
'name': 'Account 4'
}, {
'name': 'Item 5'
}, {
'name': 'Item 6'
}, {
'name': 'User 7'
}, {
'name': 'User 8'
}];
});
// jQuery
$('.dropdown-menu').find('.dontClose').click(function(e) {
e.stopPropagation();
});
.dropdown.dropdown-scroll .dropdown-menu {
max-height: 200px;
width: 60px;
overflow: auto;
}
.search-control {
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="dropdown dropdown-scroll" ng-app="app">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">Select <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" ng-controller="ListCtrl">
<li role="presentation" class="dontClose">
<div class="input-group input-group-sm search-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
</div>
</li>
<li role="presentation" ng-repeat='item in items | filter:query'> {{item.name}}
</li>
</ul>
</div>
you can use datalist tag also If you want to build your own searchable dropdown ..Here is the working code:
HTML Part:
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<form ng-submit="click(search);">
<label class="child-label" for="existing-phases">Existing: </label>
<input type="text" ng-model="search" list="names">
<datalist id="names" class="form-control" ng-model="name">
<option value=''>-- select an option --</option>
<option ng-repeat="option in contacts | filter:search | limitTo:3" value="{{option.name}}"></option>
</datalist>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
JS Part:
var app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
$scope.showContacts = function() {
$scope.contacts = [{
id: 1,
name: "Ben",
age: 28
}, {
id: 2,
name: "Sally",
age: 24
}, {
id: 3,
name: "John",
age: 32
}, {
id: 4,
name: "Jane",
age: 40
}];
};
$scope.showContacts();
$scope.click = function(MyData) {
alert(JSON.stringify(MyData));
};
});
Working Demo is available here..https://plnkr.co/edit/hamW3F05YUPrWwS3RmmG?p=preview
You're in the right path. All you need to do now is create an http service or factory that triggers an API call every keypress, and the result of which populates your $scope.businesses array.
If you want to build searchable drop-down on your own then you can make use of filters.searchable drop-down with filters using textbox
If you want to go for a plugin check angular multi select
I've recenlty used in one of my projects. It is a flexible plugin and it allows multi-select also.
You can use dropdown select plugin
JS
const app = angular.module('DropdownSelectApp', ['DropDownSelect']);
HTML
<dropdown-select dd-model="exampleModel" dd-data="exampleItemList" dd-label="labelName" >
See this like for demo: https://saravanajd.github.io/Angularjs-Dropdown-Search/