current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 1 down vote favorite

What is the simplest way to add some commands to the end of the Angular select box? E.g. I want to get a list like this:

  1. Cat
  2. Dog
  3. Octopus
  4. Browse…

All items except Browse are some data / ng-options, but Browse is a command and always present. It should not be actually selectable as an item, and should call a handler instead.

I suppose I could put this command into the list bound to ng-options and manage it as a special case, but that feels like a hack. Is there a proper approach to this?

share|improve this question
    
What do you want to do exactly at the time of selecting the Browse option – Nidhish Krishnan Aug 13 '14 at 4:50
    
@NidhishKrishnan a callback with some custom code (dialog, etc). – Andrey Shchekin Aug 13 '14 at 4:53
up vote 1 down vote accepted

Take a look at this, here when you select the browse it will open a dialog box

Working Demo

html

<form ng-app="app" ng-controller="Ctrl" ng-init="item = this">
    <select ng-model="animal"  ng-change="clickToOpen()" ng-init="animal='select'">
    <option value="select">Please select an animal</option>
    <option ng-repeat="animal in animalsGroup">{{animal.name}}
    </option>
    <option value="Browse..">Browse..</option>
</select>

<script type="text/ng-template" id="templateId">
    <h1>Template heading</h1>
    <p>Content goes here</p>
    <center><input type="button" value="OK" ng-click="closeThisDialog(this)"/></center>
</script>
</form>

script

var app = angular.module("app", ['ngDialog']);

app.controller('Ctrl', function ($scope, ngDialog) {

 $scope.animalsGroup = [
          {name:'Cat'},
          {name:'Dog'},
          {name:'Octopus'}
         ];    

 // select initial value
 $scope.animal = $scope.animalsGroup[0];
 //

 $scope.clickToOpen = function () {
     if ($scope.animal === 'Browse..')
     {
         $scope.animal = "select";
         ngDialog.open({
            template: 'templateId',
            className: 'ngdialog-theme-plain',
            showClose: false,
        });
     }
     else
     {
         // other than 'Browse'
     }
 }; 

 $scope.closeThisDialog = function (dialog) {
    dialog.close(); 
 }
});
share|improve this answer
    
As I mentioned in the question, I considered this approach. But I wonder whether it is possible to do that without adding Browse to the controller data. Browse is a command, not really a data, so I would expect to have it only as a method on the controller. So far it seems a custom directive is required. I'll wait a bit to see if anyone has a different proposal, then accept this one if no one does. – Andrey Shchekin Aug 13 '14 at 5:56
    
actually you can achieve that like as given in this JSFiddle, but instead of ng-option i used ng-repeat – Nidhish Krishnan Aug 13 '14 at 6:06
    
That fiddle is really good, but how do I select an initial value (and eliminate empty entry)? See jsfiddle.net/zx9uh1op/1 -- first item is not selected. – Andrey Shchekin Aug 13 '14 at 6:21
    
Its another hack.... JSFiddle – Nidhish Krishnan Aug 13 '14 at 6:29
    
Thanks! I actually want to select the first one (e.g. Cat), not the empty one, but I'll ask that as a separate question. – Andrey Shchekin Aug 13 '14 at 6:35
up vote 1 down vote

If i understood corectly you want to handle the browse option differently .

Script :

   $scope.colors = [
          {name:'Cat'},
          {name:'Dog'},
          {name:'Octopus'},
          {name:'Browse'}
        ];
    $scope.handleChange = function(){
    if ($scope.myColor.name === 'Browse'){
    // your implementation 

    }

    }

Html :

<select ng-model="myColor" ng-options="color.name for color in colors" ng-change="handleChange"></select>
share|improve this answer
    
I considered that, but do I have to put "Browse" into the colors? It is not really a color. – Andrey Shchekin Aug 13 '14 at 4:52
    
Yeah that is one of angular way to keep the dom clean and write business in script – Ashisha Nautiyal Aug 13 '14 at 4:53

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.