Ich versuche, eine Warnmeldung anzuzeigen, nachdem der Benutzer den Elementnamen "MakeGray" aus einem Dropdown-Menü ausgewählt hat. Ich kann die Funktion jedoch überhaupt nicht zum Laufen bringen. Ich habe eine Warnmeldung in die Funktion eingefügt, um sie sofort nach dem Zugriff auszuführen. Es wird jedoch keine solche Meldung angezeigt.

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>
0
Zypps987 27 Dez. 2015 im 11:56

3 Antworten

Beste Antwort

Das Problem wird durch den Kommentar im HTML verursacht:

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

Entfernen Sie es, und alles wird wie erwartet funktionieren.

In Bezug auf die Frage in diesem Kommentar lautet die Antwort: Denn was nach as kommt, ist die Bezeichnung des Auswahlfelds, und was vorher kommt, ist das Modell. Also willst du eigentlich

t as t.name for t in templates

Demo-Plunker

2
JB Nizet 27 Dez. 2015 im 09:24

Versuchen Sie es wie folgt (ng-change = "Opencv ()" und 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");
     }
 }
0
Kawsar Hamid 27 Dez. 2015 im 09:21

Hier ist die Plunker

Ich habe gerade dein Dropdown wie unten geändert

<select ng-model="template"  ng-change="Opencv(template)" ng-options="c as (c.url + ' - ' + c.name) for c in templates">
</select>
0
Sajeetharan 27 Dez. 2015 im 09:23