如何填充angularjs中的下拉列表

时间:2016-01-27 06:56:31

标签: angularjs

我想用一些数据创建一个下拉列表。这是我的代码段

<!DOCTYPE html>
    <html>
    <head>
        <script src="Scripts/angular.min.js"></script>
        <title></title>
    </head>
    <body>
        <div data-ng-app="myApp"></div>
        <div data-ng-controller="programController"></div>
             Program:
        <select name="" id="program" data-ng-options="program for program in programs">
            <option value="">SelectProgram</option>
        </select>
            <script>
                var myApp = angular.module("myApp", []);
                myApp.controller("programController", function ($scope) {
                    $scope.programs = ['.NET', 'Java', 'Angular JS,'PHP','C++'];
                });
                 </script>
    </body>
    </html>

但我得到一个空的下拉列表。我的片段中有错误吗?

3 个答案:

答案 0 :(得分:1)

这是经过测试的代码,对我有用。你把控制器写成了 data-ng-app =“myApp”。 请插入单引号       '.NET','Java','Angular JS','PHP','C ++'在第三项之后

use Net::Stomp;
use Net::STOMP::Client;

use Moose;
use strict;
use warnings;
use FindBin qw($Bin);

print "\n$Bin\n";

my $stomp; 

  $stomp = Net::STOMP::Client->new(
      uri => "stomp+ssl://mmx-nprd1-06:7222",
      sockopts => {
          # path of the directory containing trusted certificates
          SSL_ca_path   => "$Bin/JmsCertificate/",
          # client certificate to present
          SSL_cert_file => "$Bin/JmsCertificate/aix_jms_cert.pem",
          # # client private key
          SSL_key_file  => "$Bin/JmsCertificate/aix_jms_key.pem",
          # passphrase of the client private key
          SSL_passwd_cb => sub { return("password") },
      },
  );

  $stomp->connect();

  my $peer = $stomp->peer();
  printf("connected to broker %s (IP %s), port %d\n", $peer->host(), $peer->addr(), $peer->port());

  my $sid = $stomp->uuid();
  $stomp->subscribe(
      destination => "/queue/test",
      # we use the generated subscription id
      id          => $sid,
      # we want a receipt on our SUBSCRIBE frame
      receipt     => $stomp->uuid(),
  );
  my $count = 0;
  my $frame;

  while ($count < 10) {
      $frame = $stomp->wait_for_frames(timeout => 1);
      if ($frame) {
          if ($frame->command() eq "MESSAGE") {
              $count++;
              printf("received message %d with id %s\n",
                     $count, $frame->header("message-id"));
          } else {
              # this will catch the RECEIPT frame
              printf("%s frame received\n", $frame->command());
          }
      } else {
          print("waiting for messages...\n");
      }
  }
  $stomp->unsubscribe(id => $sid);
  $stomp->disconnect();

希望这也适用。

答案 1 :(得分:0)

你忘记了数组中的单引号 $scope.programs = ['.NET', 'Java', 'Angular JS','PHP','C++'];

ng-model未在您的代码中写入 试试这个

    <div data-ng-app="myApp">
    <div data-ng-controller="programController">
         Program:
    <select name="" id="program" data-ng-options="program for program in programs" ng-model="programName" >
        <option value="">SelectProgram</option>
    </select>
</div>

<script>
var myApp = angular.module("myApp", []);
myApp.controller("programController", function ($scope) {
$scope.programs = ['.NET', 'Java', 'Angular JS','PHP','C++'];
            });
</script>

了解更多信息https://docs.angularjs.org/api/ng/directive/ngOptions

Plunker link your code

答案 2 :(得分:0)

ng-options也需要ng-model。

查看文档:{​​{3}}!

我假设列表输入正确