Angularjs如何使用ng-repeat来使用ng-default

Question

我将以下数据作为输入json，

"values":[
    {"_attributes":{"name":"data.domain"},"_text":"${url}"},
    {"_attributes":{"name":"data.port"}},
    {"_attributes":{"name":"data.comments"},"_text":"Defaults Comments"},
    {"_attributes":{"name":"data.concurrent"},"_text":4}]
]

我正在使用此指令

在我的html页面中显示评论

<b style="padding-top:5px;">&nbsp;Comments:</b>
<span class="input">
    <input class="inputtxt" type="text" ng-repeat="x in ValueArr" ng-if="x._attributes.name == 'data.comments'" ng-model="x._text">
</span> 

工作正常并按预期显示。但问题是有时候，评论节点

{"_attributes":{"name":"data.comments"},"_text":"Defaults Comments"},

可能不存在于数组中。像这样，

"values":[
    {"_attributes":{"name":"data.domain"},"_text":"${url}"},
    {"_attributes":{"name":"data.port"}},        
    {"_attributes":{"name":"data.concurrent"},"_text":4}]
]

在这种情况下，它只显示“评论：”和之后的空白屏幕。它不显示输入框。在这种情况下，我想显示空输入框。我尝试了ng-default和ng-init但是没有用。如何显示没有匹配条件的输入框？

jsfiddle

没有任何想法，如何实现这一目标。请提出建议。

谢谢

Answer 1

该解决方案适用于ng-init。

只需将其放在input上，就像这样：

<span class="input" ng-init="initValues()">
    <input class="inputtxt" type="text" ng-repeat="x in values" ng-show="x._attributes.name == 'data.comments'" ng-model="x._text" ng-init="initInput(x)">
</span>

并在Controller中添加该功能：

$scope.initInputComments = function(x) {
   if (!x._text || x._text == "") {
      x._text = "Defaults Comments"
   }
}

请注意，您需要测试x._text是否存在/已定义。

$scope.initValues = function() {
    var containsComment = false;
    for (var i = 0; i < $scope.values.length; ++i) {
      if ($scope.values[i]._attributes.name == 'data.comments') {
        containsComment = true;
      }
    }
    if (!containsComment) {
      $scope.values.push({
        "_attributes": {
          "name": "data.comments"
        }
      });
    }
  }

检查工作