Angularjs占位符在动态生成文本框时不显示

Question

我正在使用 angularjs 生成动态文本框。我在控制器中设置了一个数组，并使用 ng-repeat 在视图中重复。这是控制器代码：-

this.total_options = [
        {text : 'form.options.Option1' , placeholder: 'Enter Option Here'},
        {text: 'form.options.Option2',  placeholder: 'Enter Option Here' }
    ];

现在我正在重复这个选项，例如：-

<li data-ng-repeat="option in mcssController.total_options">                
    <input required="required" type="text"  ng-model="option.text" class="option" placeholder="{{option.placeholder}}" />
</li>

但是当页面被渲染时，文本框显示 ng-model 属性“form.options.optoin1”而不是占位符（“在此处输入选项”）。我该如何解决这个问题？

Answer 1

看看你把表格清空了，应该就能看到占位符了！

Answer 2

试试：

<li data-ng-repeat="option in mcssController.total_options">                
    <input required="required" type="text" ng-init="model=$eval(option.text)"  ng-model="model" class="option" placeholder="{{option.placeholder}}" />
</li>

您希望 ngModel 绑定到模型，而不是表示字符串的属性。由于要将字符串解释为模型，因此可以使用 $scope.$eval。如果您在 ngInit 表达式中使用 $scope.$eval，它应该可以工作，然后使用 result 绑定到 ngModel。