Question

我有一个问题

＆＃34;如何使用ngmodel自动选择选项，其中我使用ng-options和item有2个对象＆＃34;

这是我的代码：

HTML

<html>
   <head>
       <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
       <link data-require="font-awesome@4.3.0" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
       <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
       <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
       <script data-require="ui-bootstrap@0.12.1" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
       <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
       <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
       <link rel="stylesheet" href="style.css" />
       <script src="script.js"></script>
  </head>
  <body ng-app="myApp" ng-controller="appCtrl">
     {{title}}
      <select ng-options="item.val for item in items" ng-model="pilih" name="pilihan" id="pilihan">
      </select>
  </body>
</html>

和JS

var myApp=angular.module('myApp',[]);

myApp.controller("appCtrl",function($scope){
  $scope.title="judul";
  $scope.items=[
         {id:1, val:"satu"},
         {id:2, val:"dua"},
         {id:3, val:"tiga"}
      ];

  $scope.pilih="dua";
});

请帮帮我.. 谢谢你..

Answer 1

您可以尝试ng-init指令。

<select ng-options="item.val for item in items" ng-model="pilih" name="pilihan" id="pilihan" ng-init="pilih=items[1]">
      </select>

另请注意，您需要选择整个项目而不仅仅是值。

此外，您可以从控制器

分配它

$scope.pilih=$scope.items[1];

Answer 2

HTML

<select ng-options="item.id as item.val for item in items" ng-model="pilih" name="pilihan" id="pilihan">
</select>

JS

var myApp=angular.module('myApp',[]);

myApp.controller("appCtrl",function($scope){
  $scope.title="judul";
  $scope.items=[{id:1, val:"satu"},
  {id:2, val:"dua"},
  {id:3, val:"tiga"}];

  $scope.pilih = 1; // It will select the option which have id 1.
});

Answer 3

您需要做的就是将数组中的值用于模型。

以下是相同的工作副本。

＆＃13;

var myApp=angular.module('myApp',[]);

myApp.controller("appCtrl",function($scope){
  $scope.title="judul";
  $scope.items=[
         {id:1, val:"satu"},
         {id:2, val:"dua"},
         {id:3, val:"tiga"}
      ];

  $scope.pilih= $scope.items[1];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <body ng-app="myApp" ng-controller="appCtrl">
     {{title}}
      <select ng-options="item.val for item in items" ng-model="pilih" name="pilihan" id="pilihan">
      </select>
  </body>

＆＃13;

如何使用ngmodel（angularjs）自动选择选项

3 个答案: