Question

使用的技术：

PHP 5.4
AngularJS 1.2 rc2

当我从select保存值时，我遇到了问题，它保存到我的数据库中，但是当我从我的API httptget对象中我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将数字作为STRING返回之前，select正常工作。我改变了这种行为，因为AWS Elastic Beanstalk PHP默认执行此操作并且是我的生产服务器。

我如何制作＆＃34; 1＆＃34;我的html模板中的== 1很容易吗？

更新

我忘了添加一个源代码示例：

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

我收到的内容如下：

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

Answer 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

Answer 2

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

根据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）在下面的评论中使用Maxim Shoustin建议的indexOf：

<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比较。解析器获取select的选定值并将其转换回字符串。

字符串和整数比较AngularJS

更新

2 个答案: