使用JSON中的值填充选择不起作用

时间:2014-03-26 21:08:11

标签: javascript json angularjs

我正在尝试使用来自JSON的值填充select并且不起作用。我为测试目的创建了一个simple plunker。在相同的代码中,我正在尝试默认设置所选的值,这也不起作用,我的代码有什么问题?我只是复制并粘贴了我的另一个工作代码并更改变量,没有别的(Angular让我发疯)

3 个答案:

答案 0 :(得分:1)

添加了针对angular to bootstrap的ng-app,更改了ng-options以正确显示select控件,最后通过绑定到ng-model来初始化$scope.docRifStatus对象作为默认值。

示例:

HTML:

<body ng-app="plunker" ng-controller="MainCtrl">
    <select ng-model="docRifStatus" ng-options="st.name for st in mediastatus"></select>
  </body>

JS:

app.controller('MainCtrl', function($scope) {
  var elements = {
    "mstatus": [{
      "id": 1,
      "name": "Activo"
    }, {
      "id": 2,
      "name": "Inactivo"
    }, {
      "id": 3,
      "name": "Pendiente"
    }],
    "official_document": [{
      "type": "2",
      "status": "3",
      "url": "wuelto_5332893babc1b6.55975109.jpeg"
    }, {
      "type": "3",
      "status": "3",
      "url": "wuelto_5332893c750790.56043469.jpeg"
    }]
  };

  $scope.mediastatus = elements.mstatus;
  $scope.docRifStatus = $scope.mediastatus[0];
});

实例:http://plnkr.co/edit/A8MmEuFAPPrzGeGGu6GR?p=preview

答案 1 :(得分:1)

您想做什么

您想要mediastatus的实体:

{     &#34; id&#34;:3,     &#34;姓名&#34;:&#34; Pendiente&#34; }

将使用理解表达式st.id as st.name for st in mediastatus进行选择。也就是说将ng模型视图值与实体的id属性进行匹配。

你做错了什么

您绑定了docRifStatus上的ng模型,即&#34; 3&#34;而不是3.这就是整个问题。

快速解决方案

尝试在控制器初始化时设置docRifStatus

$scope.docRifStatus = +elements.official_document[0].status;

最佳做法

添加一个指令,该指令推送ngModelController.$parsers数组中的解析器函数和ngModelController.$formatters数组中的格式化程序函数。

解析器将从字符串输入返回一个数字,即&#34; 3&#34; - &GT; 3。

格式化程序将完全相反。

这样,模型中的id将始终为字符串,而与ngOptions匹配的id将是格式化的数字。选择一个值将选择一个数字id,该ID将被解析为在模型上设置。

答案 2 :(得分:1)

一些事情:

1)你忘记了ngApp

2)elements.official_document[0].status值实际上是json中的字符串而不是int。由于您正在跟踪mstatus.id这是一个int,它与初始值不匹配。将elements.official_document status属性更改为int可修复此问题。

Updated Demo