如何使用angularjs将对象值添加到表中

时间:2015-08-05 11:51:47

标签: angularjs

var app = angular.module("myapp", ["ngSanitize"]);
app.controller("controller", ['$scope', function($scope) {
    $scope.tasks = [{
        item: "Shopping",
        status: true
    }, {
        item: "Cleaning",
        status: false
    }];

}]);

和html

<div ng-app="myapp">
    <div ng-controller='controller'>
        <table border=1 ng-repeat='task in tasks'>
            <tr>
                <td>{{task.item}}</td>
                <td>{{task.status}}</td>
            </tr>
        </table>
    </div>
</div>

我尝试了如上所述,但我无法将标题附加到表格。在Done的地方,我要附加一个复选框...我的意思是如果状态为true,则必须检查chexk框,否则取消选中

Output:
Item       Done
Shopping    checkbox with ticked
Cleaning    checkbox without ticked

2 个答案:

答案 0 :(得分:0)

请参阅documentation for checkbox input

不完全是答案,但为什么要重复表而不是行?

var myInput = document.getElementById('ourInput');

if(myInput.value.length == 0)
myInput.value = "Empty";

但是,在你的案例中,我没有在表格中看到任何意义。

<div ng-app="myapp">
    <div ng-controller='controller'>
        <table border=1 >
            <tr>
                <th>Name</th>
                <th>Status</th>
            </tr>
            <tr ng-repeat='task in tasks'>
                <td>{{task.item}}</td>
                <td><input type="checkbox" ng-model="task.status"></td>
            </tr>
        </table>
    </div>
</div>

那会更清洁。

答案 1 :(得分:0)

在HTML中进行如下更改。

<body ng-app="myapp" ng-controller="ListController">
    <table border="1" ng-repeat='task in tasks'>
        <tr>
            <td>
                {{task.item}}
            </td>
            <td>
                <input type="checkbox" ng-model="task.status">
            </td>
        </tr>
    </table>
</body>

对Angular js进行如下更改。

var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
    $scope.tasks = [{
        item: "Shopping",
        status: true
    }, {
        item: "Cleaning",
        status: false
    }];
}]);