0

在用户从下拉菜单中选择项目名称：“MakeGray”后，我试图弹出一条警报消息。但是，我什至根本无法运行该功能。我在函数中放置了一条警报消息，以便在它被访问时立即运行，但是没有弹出这样的消息。

JS

app.controller('MainController',['$scope', '$http', 'API', function($scope, $http, API){
    $scope.imageUrl = "";

    $scope.template = "";
    $scope.templates =[ 

    {name: 'select an option...'},
    {name: 'MakeGray', url:'opencv/MakeGray/MakeGray.html'},
    {name: 'Canny'},

    ];    

    $scope.template = $scope.templates[0];

    $scope.Opencv = function(template){
    alert("HI");
        if (template.name === 'MakeGray'){
            alert("MAKEGRAY");
        }
    }
}]);

HTML

<html ng-app="app">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/opencv_css.css" />
  </head>

  <nav class="navbar navbar-default">
    <div class="container">                 <!-- top intro part -->
      <div class="navbar-header">
    <a class="navbar-brand" href="#/">  OPENCV 3.0.0</a>
      </div>

      <ul class="nav navbar-nav navbar-right">
    <li><a href="#/"><i class="fa fa-home"></i> Home</a></li>
    <li><a href="#/about"><i class="fa fa-shield"></i> About</a></li>
    <li><a href="#/contact"><i class="fa fa-comment"></i> Contact</a></li>
      </ul>
    </div>
  </nav>

  <body ng-controller="MainController">

    <div class="row"> <!-- Dropdown menu  -->

      <div class="col-md-20">
    <div id="main">
      <form class="form-horizontal" role="form">
        <label class="control-label col-md-2">Filter List:</label>
        <div class="col-md-5">

          <select id="form_filter" class="form-control"
              ng-model="template"
              ng-options="t.name for t in templates" <!-- why did t.name as t for t in templates fail? -->
              ng-change="Opencv(template)">
          </select>
        </div>
      </form>
    </div>
      </div>

      <input type="file" id="form_img" name="fileToUpload">
      <button ng-click="add()">Upload</button>   

    </div>    

    <!--

    Display Images here
    moves images about 10 pixels below the upload button 

      -->

    <br><br> 

    <div class="row">

      <div class="col-md-push-2 col-sm-push-1 col-lg-push-1 col-md-8-col-sm-8 col-lg-6 text-warning">
    <div id="imagesData">     
      <img id="img1" src="" alt="" class="data-image" />

    </div>
      </div>

      <div id="imagesData">   
    <img id="img2" src="" alt="" class="data-image" />
      </div>     

    </div>

    <!-- 
     Display html of selected opencv filter 
      -->

    <br>

    <div ng-include="template.url"></div>

    <script src="js/jQuery.js"></script>
    <script src="js/angular.js"></script>
    <script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>    
    <script src="js/app.js"></script>

  </body>
</html>
4

3 回答 3

2

问题是由 HTML 中的注释引起的：

<!-- why did t.name as t for t in templates fail? -->

删除它，一切都会按预期工作。

关于这条评论中的问题，答案是：因为后面as是选择框的标签，前面是模型。所以你实际上想要

t as t.name for t in templates

演示 plunkr

于 2015-12-27T09:24:04.030 回答
0

像这样尝试 (ng-change="Opencv()" 和 if ($scope.template === 'MakeGray'))-

<select id="form_filter" class="form-control"
          ng-model="template"
          ng-options="t.name for t in templates" <!-- why did t.name as t for   t in templates fail? -->
          ng-change="Opencv()">
      </select>


 $scope.Opencv = function(){
    alert("HI");
        if ($scope.template === 'MakeGray')
          alert("MAKEGRAY");
     }
 }
于 2015-12-27T09:21:54.250 回答
0

这是工作Plunker

我刚刚更改了您的下拉菜单，如下所示

<select ng-model="template"  ng-change="Opencv(template)" ng-options="c as (c.url + ' - ' + c.name) for c in templates">
</select>
于 2015-12-27T09:23:32.633 回答