Angularjs select option with image

Angularjs select option with image

 

How to create these select?


I'm trying to create a example about "angularjs select option with image" or "angularjs select option with custom format value", but I see that we can't use  <select> because you can't not nested html tags in <option> value.
You can't do

 

  <select multiple ng-model="selectedValues" style="width: 50%;" size="7">  
       <option ng-repeat="category in categories" value="{{category.category_id}}" ng-selected="{{selectedValues.indexOf(category.category_id.toString())!=-1}}"><b> {{category.category_name}} </b></option>  
     </select>  

I found a libraries which is good implement for this case.

1. Angular-strap

How it works?

Js:
It use  "<i class="fa fa-gear"></i>" as a icon and we can use html tag in value  "<b> Gear</b>"

 var app = angular.module('mgcrea.ngStrapDocs', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap']);  
 app.controller('MainCtrl', function($scope) {  
 });  
 'use strict';  
 angular.module('mgcrea.ngStrapDocs')  
 .controller('SelectDemoCtrl', function($scope, $http) {  
  $scope.selectedIcon = '';  
  $scope.selectedIcons = ['Globe', 'Heart'];  
  $scope.icons = [  
   {value: 'Gear', label: '<i class="fa fa-gear"></i><b> Gear</b>'},  
   {value: 'Globe', label: '<i class="fa fa-globe"></i> Globe'},  
   {value: 'Heart', label: '<i class="fa fa-heart"></i> Heart'},  
   {value: 'Camera', label: '<i class="fa fa-camera"></i> Camera'}  
  ];  
  $scope.selectedMonth = 0;  
  $scope.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];  
 });  

Html

 <!DOCTYPE html>  
 <html ng-app="mgcrea.ngStrapDocs">  
  <head>  
   <meta charset="utf-8" />  
   <title>AngularJS Plunker</title>  
   <script>document.write('<base href="' + document.location + '" />');</script>  
   <link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.3.0/css/font-awesome.css">  
   <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.4/css/bootstrap.min.css">  
   <link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/libs.min.css">  
   <link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/docs.min.css">  
   <link rel="stylesheet" href="style.css" />  
   <script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular.min.js" data-semver="1.4.5"></script>  
   <script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular-animate.min.js" data-semver="1.4.5"></script>  
   <script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular-sanitize.min.js" data-semver="1.4.5"></script>  
   <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.3.5"></script>  
   <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.3.5"></script>  
   <script src="//mgcrea.github.io/angular-strap/docs/angular-strap.docs.tpl.js" data-semver="v2.3.5"></script>  
   <script src="app.js"></script>  
  </head>  
  <body ng-controller="MainCtrl">  
 <div class="bs-docs-section" ng-controller="SelectDemoCtrl">  
  <div class="bs-example" style="padding-bottom: 24px;" append-source>  
   <label>Single select:&nbsp;</label>  
   <button type="button" class="btn btn-default" ng-model="selectedIcon" data-html="1" bs-options="icon.value as icon.label for icon in icons" bs-select>  
    Action <span class="caret"></span>  
   </button>  
   <hr>  
   <label>Multiple select:&nbsp;</label>  
   <button type="button" class="btn btn-default" ng-model="selectedIcons" data-html="1" data-multiple="1" data-animation="am-flip-x" bs-options="icon.value as icon.label for icon in icons" bs-select>  
    Action <span class="caret"></span>  
   </button>  
  </div>  
 </div>  
  </body>  
 </html>  

DEMO

Library at  http://mgcrea.github.io/angular-strap/##selects 

2. Select2 templating with angularjs

Checkout it at https://select2.github.io/examples.html

Thanks for your time reading.
Hopw it helps 




13 comments:

  1. There are tutorials that is specially designed to help you learn AngularJS as quickly and efficiently as possible.
    AngularJS

    ReplyDelete
  2. Great Explanation. Is it possible to achieve with ng-options.


    Thanks
    Sankar
    Online Angular2 Training |Online AngularJS Training

    ReplyDelete
  3. Thanks for providing the basic tutorial . This will also help the AngularJS development company in India.Thanks for the post .

    ReplyDelete
  4. It come out to be a great help with this angularJS tutorial. Altough i am myself a front end developer but still face issues at times.

    At Hashstudioz we are collectively working to strengthen the angularJS development in Mobile App Development IoT Application Development , Blockchain Application Development

    ReplyDelete
  5. It is really very helpful for us and I have gathered some important information from this blog.
    Hire Angularjs Developer in India

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Thank you for posting this awesome article. I’m a long time reader but I’ve never been compelled to leave a comment. If you are interested in looking out for AngularJs Mobile App Development want to discuss the importance of Mobile Application in the present scenario, contact anytime.
    Also Visits:
    Top iOS App Development Company
    Flutter App Development Company
    iOS App Developer
    Flutter App Developers
    Android App Developers
    Android App Development Services

    ReplyDelete
  8. https://angularjsaz.blogspot.com/2015/11/angularjs-select-option-with-image.html?sc=1663066043858#c4678340917723649971

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Great Post!
    This blog post demonstrates how to implement select options with images using AngularJS. It provides a step-by-step guide, along with code examples, to enhance user experience and visual appeal in select dropdowns. Helpful resource for AngularJS developers.
    Contact us if you're searching for the best mobile app development company in India.

    ReplyDelete
  11. Well explained the Angularjs select option with image.
    Searching for the top eCommerce app development company in India? Get in touch with us.

    ReplyDelete

Popular Posts