ng-repeat显示第一个选项的默认空值

Question

ng-repeat显示第一个选项的默认空字符串。为什么在可能的情况下它不起作用。这里有什么问题？

我的角度代码就在这里。我错在这里。我不明白。

<div>Some entry here
    <button id="0" class="remove">Remove</button>
</div>
<div>Another entry here
    <button id="1" class="remove">Remove</button>
</div>

这是我的HTML代码，

var exchange = angular.module('app', []);
exchange.controller('ExchangeController', ExchangeController);

function ExchangeController($scope, $http) {


    $http
        .get(window.location.origin + "/api/get-item/", {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined, 'Process-Data': false}
        })
        .then(function(response){
            $scope.items = response.data.items;
            $scope.send_item_id = $scope.items[0].value;
        });

    $scope.getSendItem = function() {
        var send_item_id = $("#send_item_id").val();
        console.log(send_item_id);
    }

}

Answer 1

您需要手动选择＆＃34;已选择＆＃34; item（我的解决方案中的itemSelected模型）并将您的value属性更改为ng-value，使其以AngularJS方式运行。请检查我为您创建的 demo fiddle 。顺便说一句。你不需要jQuery：请检查我在getSendItem()中记录所选项目的方式。这适用于AngularJS 1.6.x或更晚。

视图

<div ng-controller="MyCtrl">
  <select data-plugin-selectTwo 
          name="send_item_id" 
          id="send_item_id" 
          ng-model="itemSelected" 
          ng-change="getSendItem()" 
          class="form-control populate">
      <option ng-repeat="item in data" ng-value="item.value">
        @{{ item.text }}
      </option>
  </select>
</div>

AngularJS应用程序

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

myApp.controller('MyCtrl', function($scope) {

  $scope.data = [{
    "text": "Bkash",
    "value": 1
  }, {
    "text": "Paypal",
    "value": 2
  }];

  $scope.itemSelected = $scope.data[0].value;

  $scope.getSendItem = function() {
    console.log($scope.itemSelected);
  }
});

使用AngularJS 1.5.x或更早版本时，您需要使用ng-selected

在此 demo fiddle 中执行此操作

视图

<div ng-controller="Controller">
  <select name="send_item_id" 
          id="send_item_id" 
          ng-model="itemSelected" 
          ng-change="getSendItem()">
    <option
        ng-repeat="item in data" value="{{ item.value }}"
        ng-selected="{{item.value === itemSelected}}">
      {{ item.text }}
    </option>
  </select>
</div>

AngularJS应用程序

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

myApp.controller('Controller', function($scope) {

  $scope.data = [{
    "text": "Bkash",
    "value": 1
  }, {
    "text": "Paypal",
    "value": 2
  }];

  $scope.itemSelected = String($scope.data[0].value);
  console.log($scope.itemSelected);

  $scope.getSendItem = function() {
    console.log($scope.itemSelected);
  }

Answer 2

您需要匹配选项值和ng-model值，以防止默认的空白空间。在您的情况下它不匹配，因为您的选项值前面有@符号。去掉它。

<option ng-repeat="item in items" value="{{ item.value }}">@{{ item.text }}</option>

Answer 3

试试这个。它对我有用。

<option value="{{item.value}}" ng-repeat="item in items" ng-selected="$first">{{ item.text }}</option>