AngularJS

Question

AngularJS 的初学者。我有一个 JSON 字符串，它只有需要在 html select 中填充的日期。以下是我尝试过的。

JSON 字符串看起来像

[{"Dates":"04/10/2015"},{"Dates":"04/03/2015"},{"Dates":"02/20/2015"},{"Dates":"02/13/2015"},]

我的 JS 看起来像

<script>
    var app = angular.module('myApp', []);
    app.controller('dvDates', function ($scope, $http) {
        $scope.Dates = [];

        $http.post("Basics1.aspx/GetDates", { data: {} })
        .success(function (data, status, headers, config) {
            var results = JSON.parse(data.d);
            $scope.Dates = results;
        })
        .error(function (data,status,headers,config) { });

    });
</script>

HTML代码：

<div ng-app="myApp" ng-controller="dvDates">
    <select ng-model="Dates" ng-options="item.Dates as item.Dates for item in Dates">
        <option value=""> Select From Date</option>
    </select>
</div>

结果如下。 Dropdownlist 显示正确。

<select class="ng-pristine ng-valid ng-touched" ng-options="item.Dates as item.Dates for item in Dates" ng-model="Dates">
    <option value=""> Select From Date</option>
    <option value="0" label="04/10/2015">04/10/2015</option>
    <option value="1" label="04/03/2015">04/03/2015</option>
    <option value="2" label="02/20/2015">02/20/2015</option>
    <option value="3" label="02/13/2015">02/13/2015</option>
    <option value="4" label="02/06/2015">02/06/2015</option>
    <option value="5" label="01/30/2015">01/30/2015</option>
</select>

但是当我 select 任何值时，HTML 如下更改并且所有值都消失了。

<select class="ng-valid ng-dirty ng-touched" ng-options="item.Dates as item.Dates for item in AsOf" ng-model="Dates">
    <option value="? string:01/30/2015 ?"></option>
    <option value=""> Select From Date</option>
</select>

请让我知道我做错了什么。该问题仅发生在日期上。当我尝试使用普通字符串填充 Select 时，一切都按预期工作。

Answer 1

select 选项卡无法获取您的数据，因为您已经使用 post 方法获取日期，将其更改为获取方法，它将在 Json[= 中列出您的所有日期10=]

Answer 2

您需要将 select 中的模型从

更改为

ng-model="Dates"

有些不同，即

ng-model="selected.Date"

否则，每次从 select 框中选择内容时，都会覆盖 $scope.Dates 模型

angular.module("app", [])
  .controller('homeCtrl', function($scope) {


    $scope.Dates = [{
      "Dates": "04/10/2015"
    }, {
      "Dates": "04/03/2015"
    }, {
      "Dates": "02/20/2015"
    }, {
      "Dates": "02/13/2015"
    }];

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="homeCtrl">
    <select ng-model="selected.Date" ng-options="item.Dates as item.Dates for item in Dates">
      <option value="">Select From Date</option>
    </select>

    Selected : {{selected.Date}}
  </div>
</body>

AngularJS - JSON 字符串到 select

AngularJS - JSON string to select

select

ng-options