如何使用angularjs优化我的代码

时间:2016-11-08 15:06:59

标签: html angularjs

我做了很多研究,但我没有找到答案,或者我没有理解有人写的代码 - 它没有用。现在我有很多代码。我想用AngularJS优化我的代码 - 例如ng-repeat或类似的东西。示例是if行..还有4个......

$scope.url = "an URL";
$http.get($scope.url)
.then(function(response) {
    $scope.x = response.data;
    var y1 = response.data.a.tools;
    var y2 = response.data.b.tools;
    var y3 = response.data.c.tools;
    var y4 = response.data.d.tools;
    var y5 = response.data.e.tools;
    var y6 = response.data.f.tools;

    //...

    var boxArray = ["jenkins", "gitHub", "jira", "urbanCode"];

    if (y1[0] == boxArray[0]) {$scope.jenkins1 = boxArray[0];} else {$scope.jenkins1 ="";};
    if (y1[1] == boxArray[1]) {$scope.gitHub1 = boxArray[1];} else {$scope.gitHub1 ="";};
    if (y1[2] == boxArray[2]) {$scope.jira1 = boxArray[2];} else {$scope.jira1 ="";};
    if (y1[3] == boxArray[3]) {$scope.urbanCode1 = boxArray[3];} else {$scope.urbanCode1 ="";};

    if (y2[0] == boxArray[0]) {$scope.jenkins2 = boxArray[0];} else {$scope.jenkins2 ="";};
    if (y2[1] == boxArray[1]) {$scope.gitHub2 = boxArray[1];} else {$scope.gitHub2 ="";};
    if (y2[2] == boxArray[2]) {$scope.jira2 = boxArray[2];} else {$scope.jira2 ="";};
    if (y2[3] == boxArray[3]) {$scope.urbanCode2 = boxArray[3];} else {$scope.urbanCode2 ="";};

    //.....

我希望从我的复选框中取回boxArray的名称,而不是真或假。

1 个答案:

答案 0 :(得分:0)

y变量列表可以转换为数组:

 var abc = "abcdef";
 var yList = [];
 for (var i=0; i<abc.length; i++) {
    yList[i] = response.data[abc[i]].tools;
 };

以上示例使用property accessor来对名称进行交互,data.adata.b ......

然后模板可以使用ng-repeat

 <tr ng-repeat= "y in yList">
     {{y}}
 </tr>

可以使用类似的技术将每行中的数据转换为数组。然后,模板可以使用嵌套的ng-repeat

 <tr ng-repeat="y in yList">
     <td ng-repeat="box in boxArray">
          {{y[box]}}
     </td>
 </tr>