Question

我有一个有时会有true或false值的列表。当我使用ng-repeat显示<input type="text">内的值列表时，如果值与布尔值匹配，我希望<input type="checkbox">。

<table class="table table-hover table-striped table-bordered">
    <tbody>
        <tr ng-repeat="parameter in parameter_list">
            <th class="text-left">
                {{parameter.title | uppercase}}
            </th>
            <td class="text-left">
              <div class="form-group">
                <input type="text" ng-model="parameter_list[$index].value" class="form-control">
              </div>
            </td>
        </tr>
    </tbody>
</table>

任何想法，我怎样才能做到这一点？

Fiddle

修改：由于我在input变量中没有type $scope，因此不重复。

Answer 1

保持简单：

<input type="{{typeInput}}" />

在你的控制器中：

$scope.typeInput = 'number';

像魅力一样工作，没有额外的代码

Answer 2

我会建议更通用的方法。首先，如果您想按类型区分输入，则需要在控制器中声明一些类型检查功能：

$scope.getType = function(x){
    return Object.prototype.toString.call(x);
}

您需要这样做，因为在表达式中无法执行此操作 - 请参阅：How to get a type of scope variable in Angular expression?

然后在您的视图中，您可以使用ng-if指令根据字段的类型显示不同的控件。这是布尔值的示例表达式：

ng-if="getType(parameter_list[$index].value) == '[object Boolean]'"

您还应该正确定义布尔值，而不是“true”/“false”但是真/假：

{
        "title": "differed",
        "value": true
}

最后，您的示例代码如下所示。

查看：

<div ng-controller="MainCtrl" class="container"> <div> <table class="table table-hover table-striped table-bordered"> <tbody> <tr ng-repeat="parameter in parameter_list"> <th class="text-left"> {{parameter.title | uppercase}} </th> <td class="text-left"> <div class="form-group" ng-if="getType(parameter_list[$index].value) != '[object Boolean]'"> <input type="text" ng-model="parameter_list[$index].value" class="form-control"> </div> <div class="form-group checkbox" ng-if="getType(parameter_list[$index].value) == '[object Boolean]'"> <label><input type="checkbox" ng-model="parameter_list[$index].value">{{ parameter_list[$index].title }} </label> </div> </td> </tr> </tbody> </table> </div> </div>

<强>控制器：

var mymodal = angular.module('mymodal', []); mymodal.controller('MainCtrl', function ($scope) { $scope.getType = function(x){ return Object.prototype.toString.call(x); } $scope.parameter_list = [ { "title": "name", "value": "Product3" }, { "title": "version", "value": "01.00.00" }, { "title": "inventory_name", "value": "Product3" }, { "title": "inventory_version", "value": "01.00.00" }, { "title": "differed", "value": true }, { "title": "differed_name", "value": "whatever" }, { "title": "accept_error_while_reboot", "value": false }, { "title": "setup", "value": "" }, { "title": "ggg", "value": "setup.exe" }, { "title": "fx", "value": "test" }, { "title": "gx", "value": "setup.exe" }, { "title": "tx", "value": "setup.exe" } ] });

在这里你可以找到JSFiddle：http://jsfiddle.net/57qhsqwf/2/

Answer 3

您只需定义 ngShow 和 ngHide 。

FIDDLE

EDIT FIDDLE

如果你想使用show;

<div class="form-group">
    <input type="checkbox" ng-show="parameter_list[$index].value==false || parameter_list[$index].value==true " ng-model="parameter_list[$index].value" class="form-control">
    <input type="text" ng-show="parameter_list[$index].value!=false && parameter_list[$index].value!=true " ng-model="parameter_list[$index].value" class="form-control">
</div>

或者您可以发送isChecked值的对象。

<div class="form-group">
    <input type="checkbox" ng-show="parameter_list[$index].isChecked" ng-model="parameter_list[$index].value" class="form-control">
    <input type="text" ng-show="!parameter_list[$index].isChecked" ng-model="parameter_list[$index].value" class="form-control">
</div>

Answer 4

我更新了你的jsfiddle：http://jsfiddle.net/tornado1979/jp5rcm8j/2/

我使用ng-show指令检查值是tru还是false，并创建动态复选框，可以检查或不检查。

<input ng-show="parameter_list[$index].value !=true && parameter_list[$index].value !=false" type="text" ng-model="parameter_list[$index].value" class="form-control">

<input ng-show="parameter_list[$index].value==true || parameter_list[$index].value==false" type="checkbox" ng-model="parameter_list[$index].value" class="form-control">

1。虽然使用＆{39; setup＆＃39;但是存在问题。属性，你把它留空所以angular将它读作false并创建一个复选框。你能添加一个不同于null的值吗？这将完全解决问题。

2。我将＆＃39; true＆＃39; 和＆＃39; false＆＃39; 值更改为 true 和 false 没有＆＃39; 符号，因为要理解的是布尔值而不是字符串值。

希望有所帮助，祝你好运。

Answer 5

您可以使用ng-switch根据属性值为true或false来实现目标！

<table class="table table-hover table-striped table-bordered">
<tbody>
    <tr ng-repeat="parameter in parameter_list">
        <th class="text-left">
            {{parameter.title | uppercase}}
        </th>
        <td class="text-left">
          <div class="form-group" ng-switch="parameter_list[$index].value">
            <input type="text" ng-model="parameter_list[$index].value" class="form-control" ng-switch-when="true">

干杯! ：）

Angularjs：动态更改输入类型

5 个答案: