0

データベースからデータを取得する Web アプリを作成しています。

<select ng-model="ucomname" ng-init="ucomname='{{o.comname}}'" ng-change="uucomname(o)">
 <option ng-repeat="o in comnamelistfun" value="{{o.comname}}">{{o.comname}}</option>
</select>

これは私のドロップダウンリストですが、一番上に空白行が追加されていますが、静的データをフェッチすると正常に動作しますが、動的データを使用するとドロップダウンリストに余分な空白が追加され始めます。

注: データは純粋に動的であり、静的データでも問題なく動作しています

私も試しng-optionましたが、まだ余分な空白ができています

4

2 に答える 2

1

コントローラーでこれを試してください

var app = angular.module('App', []);
app.controller('Ctrl', function($scope) {
$scope.comnamelistfun = [
  {comname: 'One'},
  {comname: 'Two'},
  {comname: 'Three'}
];
 $scope.ucomname=$scope.comnamelistfun[0].comname;
});

意見

<div ng-controller="Ctrl">
<select ng-model="ucomname" ng-options="o.comname as o.comname for o in comnamelistfun">

于 2016-10-21T07:37:23.603 に答える
1

ng-modelselect が定義されていないか、ng-model によって参照される値が一連のオプションに存在しない場合に発生します。この場合、Angular はデフォルトでそれを追加します。ロジックに従って値を指定するだけで、空白のオプションは表示されません。

そして、ここでは、タグ自体ではなく on タグ内で作成しているため、値があるとはng-init="ucomname='{{o.comname}}'"思いません(オプションをng-repeatすることは正しいですが、選択時にその変数を取得することはできません)ong-repeatselectoptionselect

編集：

例を追加しました。私はあなたの正確な変数がわからないので、私の選択の1つを使用したため、ng-option宣言を少し変更し、それchangeがないため関数を削除しました。しかし、以下の主な行では、選択$scope.ucomname = $scope.comnamelistfun[0].comname;のデフォルト値を割り当てている場所に気付くはずです。ng-model

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.comnamelistfun = [
      {comname: 'a'},
      {comname: 'b'},
      {comname: 'c'}
    ];
    $scope.ucomname = $scope.comnamelistfun[0].comname;
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">


<select ng-model="ucomname" ng-options="o.comname as o.comname for o in comnamelistfun">
</select>



</body>
</html>

于 2016-10-21T07:14:12.310 に答える