Question

我做了一个小的angularjs应用程序，用户选择一个月，然后页面显示适当的苍蝇（如飞钓）。我可以让它的一部分工作而不是另一部分。正在工作的部分：当用户选择一个月时，该应用确实会显示正确使用的苍蝇。部分不起作用：我希望显示文字显示：“[月份名称在此处使用的正确的飞行]是：[飞的名字在这里]。”

重复我之前所说的，我想要显示的第二部分正在工作。我确实得到了正确的飞行名称。这是我希望它重复所选月份的第一部分，我无法弄清楚。谢谢。

JS

angular.module('myApp', ['ngRoute'])

.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/home', {
            templateUrl: 'views/home.html',
            controller: 'myController'
        })
        .when('/directory', {
            templateUrl: 'views/directory.html',
            //since this page requires a controller
            controller: 'myController'
        })
        .otherwise({
            redirectTo: '/home'
        });

}]);  //.config


angular.module('myApp')
   .controller('myController', function($scope) {
      $scope.dir_message = ("This is the directory page.");
      $scope.months = [{monthName: 'January', flyName: 'Clouser Deep Minnow' },{ monthName: 'February', flyName: 'Woolly Bugger' },{ monthName: 'March', flyName: 'Zonker' }];      
});

HTML

<p>Select a Month.</p>

<div ng-app="myApp">
      <select ng-model="selectedItem">
        <option ng-repeat="month in months" value="{{month.flyName}}">{{month.monthName}}</option>
      </select>

<div ng-model="month">
      <p>The correct fly to use for {{month.monthName}} is : {{selectedItem}}</p>
</div>

</div>

Answer 1

使用ng-options代替ng-repeat。这将允许将月份对象（及其名称和飞行名称）绑定到selectedItem属性。

  <select ng-model="selectedItem" ng-options="month as month.monthName for month in months">
    <option value=""></option>
  </select>

  <p>The correct fly to use for {{ selectedItem.monthName}} is : {{ selectedItem.flyName }}</p>

注意div上的ng-model是没有意义的。

无法在AngularJS中显示数据

1 个答案: