javascript - 向 Angular 选项列表添加其他命令

Question

向 Angular 选择框末尾添加一些命令的最简单方法是什么？例如。我想得到这样的列表:

1. 猫
2. 狗
3. Octopus
4. 浏览...

除了 Browse 之外的所有项目都是一些数据/ng-options，但是 Browse 是一个命令并且始终存在。它实际上不应该作为一个项目被选择，而是应该调用一个处理程序。

我想我可以将此命令放入绑定(bind)到 ng-options 的列表中，并将其作为一种特殊情况进行管理，但这感觉就像一个 hack。对此有正确的方法吗？

Answer 1

看看这个，在这里当你选择浏览时它会打开一个对话框

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>

脚本

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(); 
 }
});