向角选项列表中添加附加命令

Question

向角选择框的末尾添加一些命令的最简单方法是什么？我想要一张这样的单子：

1. 猫
2. 狗
3. 八爪鱼
4. 浏览…

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

我想我可以将这个命令放入绑定到ng-options的列表中，并将其作为特例进行管理，但这感觉就像一次黑客攻击。对此是否有适当的办法？

Answer 1

看看这个，当您选择浏览时，它将打开一个对话框。

工作演示

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

Answer 2

如果我能理解的话，您希望以不同的方式处理浏览选项。

脚本:

   $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>