向angular选项列表中添加额外的命令

Adding additional commands to angular options list

本文关键字：命令 添加 angular 选项 列表      更新时间：2023-09-26

在Angular选择框的末尾添加一些命令的最简单的方法是什么?例:我想要一个这样的列表:

    猫
    2. 狗
  3. 章鱼
  4. Browse…

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

我想我可以把这个命令放到绑定到ng-options的列表中，并把它作为一个特例来管理，但这感觉像是一个hack。有什么合适的方法吗?

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

演示工作

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

如果我理解正确的话，你想用不同的方式处理浏览选项。

脚本: 

   $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>
相关文章：