Question

过去一小时我一直试图获取在angularJS控制器中声明的对象列表以填充下拉菜单。当我点击下拉列表中的一个对象时，我希望控制器然后调用名为“API”的工厂，然后返回与所选对象相对应的html页面。

HTML

<html ng-app="app">
  <head>
    <link rel="stylesheet" href="css/bootstrap.min.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">         

      <div class="col-md-10">  <!-- opencv dropdown menu  -->
    <div id="opencvFilters">
      <form class="form-horizontal" role="form">
        <label class="control-label col-md-2">Opencv Filters :</label>

        <div class="col-md-10">     
          <select class="form-control"
              ng-model="template"
              ng-options="t.name for t in templates">
        <!--ng-change="Opencv_Controllers(filter)">-->
        <option value=""> Select Filter</option>              
          </select>
        </div>

      </form>
    </div>
      </div>
    </div>

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

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

  </body>
</html>

angularJS

var app = angular.module("app", ["ui.bootstrap"]);

//http://stackoverflow.com/questions/18571001/file-upload-using-angularjs
app.factory("API", function ($http) {
    return {
    uploadImage: function (image) {
        $http.post("upload.php", image);
    }
    }
)};

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

    $scope.templates = [];             // Declare Array
    $scope.templates.push("MakeGray"); // Push object into array
    $scope.templates.push("Canny");

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

    $scope.add = function() {
    var f = document.getElementById('file').files[0];
    var r = new FileReader();
    r.onloadend = function(e) {
        var data = e.target.result;

        API.uploadImage(data)
        .success(function (imgUrl) {
            $scope.imageUrl = imgUrl;
        })
        .error (function (error) {
        });
    }
    r.readAsBinaryString(f);
    }
}]);

Answer 1

编辑：正确答案：

尝试在模板中使用ng-options =＆＃34; t＆＃34;而不是＆＃34; t.name＆＃34;。你还没有分配一个＆＃34;名称＆＃34;该json对象的属性

如何使用下拉列表绑定工厂和控制器？

1 个答案: