Ich habe die Datenmenge (maximale Länge - 8):Winkelfilter für Tisch
[{"number":1,
"name":"name 1"
},
{"number":3,
"name":"name 3"
},
{"number":6,
"name":"name 6"
}]
Und ich brauche ein Tisch weicht wie folgt aussieht:
Wie kann ich das tun?
verwenden: https://docs.angularjs.org/api/ng/directive/ngBindHtml
Probe:
var myCtrl = function ($scope) {
$scope.list = [{number:1,name:"name 1"},{number:3,name:"name 3"},{number:6,name:"name 6"}];
$scope.fakeList = [1,2,3,4,5,6,7,8];
$scope.getName = function (ind) {
for (var i = 0; i < $scope.list.length; i++)
{
if (ind == $scope.list[i].number)
return $scope.list[i].name;
}
return "//empty";
}
}
var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl', ['$scope', myCtrl]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<ul ng-controller="myCtrl">
<li ng-repeat="item in fakeList">
<span ng-bind-html="getName(item)"></span>
</li>
</ul>
</div>Sie können es tatsächlich mit nur HTML funktioniert, keine Controller Manipulationen erforderlich:
angular.module('demo', []).controller('DemoController', function($scope) {
$scope.items = [{
"number": 1,
"name": "name 1"
}, {
"number": 4,
"name": "name 4"
}, {
"number": 6,
"name": "name 6"
}]
});table {
width: 100px;
border-collapse: collapse;
}
table td {
padding: 2px 10px;
border: 1px #DDD solid;
}
table tr.item {
background: #EEE;
}
.panel {
position: absolute; top: 10px; left: 120px;
}
pre.panel {left: 240px; top: 0; font-size: 11px;}<script src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<div ng-app="demo" ng-controller="DemoController">
<table>
<tr ng-repeat="j in '12345678'.split('').slice(0, items[0].number - 1) track by $index">
<td>{{ j }}</td>
<td></td>
</tr>
<tr class="item" ng-repeat-start="item in items" x-binding="{{ index = $index; next = $last ? 9 : items[$index + 1].number }}">
<td>{{ item.number }}</td>
<td>{{ item.name }}</td>
</tr>
<tr ng-repeat-end ng-repeat="j in '12345678'.split('').slice(item.number, next - 1) track by $index">
<td>{{ j }}</td>
<td></td>
</tr>
</table>
<div class="panel">
<input type="number" ng-model="items[0].number" min="1" max="{{ items[1].number - 1 }}" />
<input type="number" ng-model="items[1].number" min="{{ items[0].number + 1 }}" max="{{ items[2].number - 1 }}" />
<input type="number" ng-model="items[2].number" min="{{ items[1].number + 1 }}" max="8" />
</div>
<pre class="panel">{{ items | json }}</pre>
</div>