1

使用的技术：

  • PHP 5.4
  • AngularJS 1.2 rc2

当我将值从select它保存到我的数据库中时，我遇到了一个问题，但是当我从我的 API 中 $http.get 对象时，select我的模板中没有选择正确的选项，而没有我先将其转换为字符串.

<select
    class='input-xlarge'
    ng-model='main.newGoal.end_day'
    ng-options='key as val for (key, val) in options.weekDays'>
    <option value=''>-- Select a Day --</option>
</select>

我已经从我的 API 检查了对象，并且收到了正确值的 INT，但我已将其转换为字符串以使其在我的 html 模板中正确选择：

$scope.main.newGoal.end_day = $scope.main.newGoal.end_day + "";

在我的 API 以字符串形式返回数字之前，select工作正常。我更改了此行为，因为 AWS Elastic Beanstalk PHP 默认执行此操作并且是我的生产服务器。

如何在我的 html 模板中轻松制作 "1" == 1？

更新

我忘了添加我的源代码示例：

$scope.options = {
  weekDays: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
};

我收到类似的东西：

$scope.main = {
  newGoal: {
    end_day: 5,
    start_day: 0
  }
}
4

2 回答 2

1

最简单的方法是使用 indexOf.

例如：

HTML

<div ng-app ng-controller="MyCtrl">
    <select ng-model="selectedItem" ng-options="options.weekDays.indexOf(selectedItem) as selectedItem for selectedItem in options.weekDays"></select>
    selectedItem: {{selectedItem}}
</div>

控制器

function MyCtrl($scope) {
   $scope.options = {
  weekDays: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
};
    $scope.selectedItem = 0;
}

演示Fiddle

于 2013-10-11T15:44:41.293 回答
1

编辑：我更好地理解这里的问题！

根据关于ng-options的 Angular Docs ，(key , value)仅在处理对象时。因此，当您这样做时(key, val) in options.weekDays，键对应于一个“属性名称”，它是一个字符串。但是在您的情况下，您正在处理一个数组。为了使它成为一个数字，你必须先解析它。

我看到了两种方法（这没有上一个答案的指令）。

这是演示的新版本（http://jsbin.com/ORuKike/15/edit?html,js,output）

1）使用函数：

$scope.getKey = function(key) {
    // 10 is the radix, which is the base (assumed to be base 10 here) 
    return parseInt(key, 10); 
}

ng-options 变为：

ng-options="getKey(key) as val in (key, val) in options.weekDays"

2）在您的数组上使用过滤器对其进行格式化：

app.filter('parseInt', [function() {
  return function(input) {
    var newinput = [];
    angular.forEach(input, function (val, key) {
      this.push({key: key, val: val});
    }, newinput);
    return newinput;
  };
}]);

ng-options 变为：

ng-options="item.key as item.val for item in options.weekDays | parseInt"

这类似于 Maxim Shoustin 提出的建议，但它考虑了一个名称数组，并且它对您的控制器是隐藏的，并且可以在其他地方用作过滤器。如果您愿意，您也可以使用 $filter 服务并在您的控制器中调用它。

3）indexOf按照Maxim Shoustin在以下评论中的建议使用：

<select
    class="input-xlarge"
    ng-model="main.newGoal.end_day" 
    ng-options="options.weekDays.indexOf(item) as item for item in options.weekDays">
</select>

这里，item是工作日的值，我们将其在工作日数组中的位置作为选项的值，用于与模型进行比较。

--初步回答--

（我认为模型是一个字符串，它不能匹配一个int键，但它实际上是相反的。模型是一个int，键是一个字符串。我会留下这个，以防其他人遇到这个问题。）

您可以使用指令来解析 ng-model 值：

编辑：这是一个现场演示（http://jsbin.com/ORuKike/3/edit?html,js,output）。

html

<select
    class='input-xlarge'
    ng-model='main.newGoal.end_day'
    ng-options='key as val for (key, val) in options.weekDays' 
    parse-int>
    <option value=''>-- Select a Day --</option>
</select>

js

app.directive('ParseInt', [function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, controller) {
            controller.$formatters.push(function (modelValue) {
                return parseInt(modelValue, 10);
            });

            controller.$parsers.push(function (viewValue) {
                return '' + viewValue;
            });
        }
    }
} ])

格式化程序获取您的 ng-model 值并将其解析为 int 以进行 ng-options 比较。解析器获取选择的选定值并将其转换回字符串。

于 2013-10-11T15:54:00.337 回答