AngularJS-要选择的JSON字符串

debugcn 发表于 Dev

星际

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>

但是，当我为此选择任何值时，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，一切都会按预期进行。

除夕夜

您需要从以下选项中更改模型

ng-model="Dates"

对于不同的

ng-model="selected.Date"

否则，每次当您从选择框中选择某项时，都会覆盖您的$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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。