在具有Angular转发器的表中使用数据输出功能

时间：2016-07-22 13:24:28

标签： javascript angularjs json object

我很擅长编写体面的JS并且对Angular来说是全新的。

我正在尝试构建一个非常小的应用程序，它从外部JSON获取数据，并将其输出到表中。我已经完成了那部分，现在我想玩弄一些数据。

我使用Angular ng-repeater输出我的数据：

 <tr ng-repeat="pattern in pattern">
   <td>{{ pattern.brand }}</td>
   <td>{{ pattern.name }}</td>
   <td>{{ pattern.size }}</td>
   <td>{{ pattern.quantity}}</td>
   <td>{{ pattern.fabricType }}</td>
 </tr>

这一切都很好（see this codepen）。

现在我想通过创建一些自定义函数来开始操作数据。我阅读了一个教程，该教程的函数很短，将firstName和lastName字段中的数据连接到fullName并将其输出到表中。功能看起来像这样：

fullName: function() {
  var studentObject;
  studentObject = $scope.student;
  return studentObject.firstName + " " + studentObject.lastName;
}

参考：http://www.tutorialspoint.com/angularjs/angularjs_tables.htm

在HTML中使用{{student.fullName()}}调用它。我想做类似的事情。如果我的quantity数据= -1我实际上想将其作为Unlimited输出到表格中。

我写了这个函数：

// Function to name the quantity field correctly
    function quantityLabel() {
        if ($scope.pattern.quantity == -1){
            return 'Unlimited';
        }else {
            return quantity;
        }
    }

但我无法通过简洁的方式编写这样的函数并在模板中调用它，就像在教程中一样。

Here's my broken codepen。我做错了什么？

2 个答案:

答案 0 :(得分：2)

在你的控制器中试试这个：

$scope.quantityLabel = function (quantity) {
    return quantity === -1 ? 'Unlimited' : quantity;
}

然后在你的模板中调用它：

<td>{{quantityLabel(pattern.quantity)}}</td>

修改

为了澄清一下这里发生了什么，你想把一个函数附加到占用数量值的范围，修改它并返回你想要的值。正如您所看到的，范围函数采用参数＆＃34;数量＆＃34;并返回一个字符串＆＃34; infinity＆＃34;如果值为-1。如果不是，则返回原始数量。在模板中，我们调用此函数传递$scope.pattern.quantity。

每个摘要周期，angular会将$scope.pattern.quantity传递给函数并显示它的返回值。

答案 1 :(得分：0)

嗯，@ instantaphex回答的是正确和好的。您也可以直接在视图中编写它：

<td>{{ pattern.quantity === -1 ? 'Unlimited' : pattern.quantity }}</td>

您还可以为此添加一个小指令（指令用于可重用组件）：

myApp.directive('quantity', function() {
    return {
        restrict: 'E',
        template: '{{fooValue === -1 ? "Unlimited" : fooValue}}',
        scope: {
            fooValue: '=value'
        }
    }
});

并在HTML中使用它：

<td><quantity value="pattern.quantity"></quantity></td>

通过这种方式，如果在不同的页面中使用，则不必复制粘贴相同的逻辑。

请参阅下面的工作示例：

var tableApp = angular.module("tableApp", []);

tableApp.controller('patternController', function($scope) {
  $scope.pattern = data;
});

tableApp.directive('quantity', function() {
  return {
    restrict: 'E',
    template: '{{finalQuantity}}',
    scope: {
      fooValue: '=value'
    },
    controller: function($scope) {
      if ($scope.fooValue === -1) {
        $scope.finalQuantity = 'Unlimited';
      } else {
        $scope.finalQuantity = $scope.fooValue;
      }
    }
  }
});

var data = [{
  "id": "0001",
  "brand": "New Look",
  "name": "NL6209",
  "size": "O/S",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }],
  "condition": [{
    "id": "2001",
    "type": "Uncut"
  }],
  "quantity": 1,
  "fabricType": "woven"
}, {
  "id": "0002",
  "brand": "Vogue",
  "name": "8983",
  "size": "16-24",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }, {
    "id": "1006",
    "type": "Tunic"
  }],
  "condition": [{
    "id": "2001",
    "type": "Uncut"
  }],
  "quantity": 1,
  "fabricType": "woven"
}, {
  "id": "0003",
  "brand": "McCalls",
  "name": "6696",
  "size": "16-24",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }],
  "condition": [{
    "id": "2001",
    "type": "Uncut"
  }, {
    "id": "2002",
    "type": "Cut"
  }],
  "quantity": 3,
  "fabricType": "woven"
}, {
  "id": "0004",
  "brand": "Simplicity",
  "name": "1669",
  "size": "16-24",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }, {
    "id": "1002",
    "type": "Top"
  }, {
    "id": "1003",
    "type": "Jacket"
  }, {
    "id": "1004",
    "type": "Trouser"
  }],
  "condition": [{
    "id": "2002",
    "type": "Cut"
  }],
  "quantity": 1,
  "fabricType": "woven"
}, {
  "id": "0005",
  "brand": "Vogue",
  "name": "8577",
  "size": "16-22",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }],
  "condition": [{
    "id": "2002",
    "type": "Cut"
  }],
  "quantity": 1,
  "fabricType": "woven"
}, {
  "id": "0006",
  "brand": "Butterick",
  "name": "5898",
  "size": "XL-6X",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }, {
    "id": "1003",
    "type": "Jacket"
  }],
  "condition": [{
    "id": "2001",
    "type": "Uncut"
  }],
  "quantity": 1,
  "fabricType": "woven"
}, {
  "id": "0007",
  "brand": "McCalls",
  "name": "6741",
  "size": "18W-24W",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }],
  "condition": [{
    "id": "2001",
    "type": "Uncut"
  }],
  "quantity": 1,
  "fabricType": "woven"
}, {
  "id": "0008",
  "brand": "Simplicity",
  "name": "1101",
  "size": "20W-28W",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }],
  "condition": [{
    "id": "2001",
    "type": "Uncut"
  }],
  "quantity": 1,
  "fabricType": "woven"
}, {
  "id": "0009",
  "brand": "Butterick",
  "name": "6185",
  "size": "14-22",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }, {
    "id": "1002",
    "type": "Top"
  }, {
    "id": "1003",
    "type": "Jacket"
  }, {
    "id": "1004",
    "type": "Trouser"
  }, {
    "id": "1005",
    "type": "Skirt"
  }],
  "condition": [{
    "id": "2001",
    "type": "Uncut"
  }],
  "quantity": 1,
  "fabricType": "woven"
}, {
  "id": "0010",
  "brand": "McCalls",
  "name": "6713",
  "size": "18W-24W",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }],
  "condition": [{
    "id": "2001",
    "type": "Uncut"
  }],
  "quantity": 1,
  "fabricType": "knit"
}, {
  "id": "0011",
  "brand": "Kwik Sew",
  "name": "4068",
  "size": "O/S",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }],
  "condition": [{
    "id": "2001",
    "type": "Uncut"
  }],
  "quantity": 1,
  "fabricType": "woven"
}, {
  "id": "0012",
  "brand": "McCalls",
  "name": "7381",
  "size": "L-XXL",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }],
  "condition": [{
    "id": "2001",
    "type": "Uncut"
  }],
  "quantity": 1,
  "fabricType": "woven"
}, {
  "id": "0013",
  "brand": "Kwik Sew",
  "name": "3874",
  "size": "O/S",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }, {
    "id": "1006",
    "type": "Tunic"
  }],
  "condition": [{
    "id": "2001",
    "type": "Uncut"
  }],
  "quantity": 1,
  "fabricType": "woven"
}, {
  "id": "0014",
  "brand": "Vogue",
  "name": "9146",
  "size": "14-22",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }],
  "condition": [{
    "id": "2001",
    "type": "Uncut"
  }],
  "quantity": 1,
  "fabricType": "woven"
}, {
  "id": "0015",
  "brand": "McCalls",
  "name": "7350",
  "size": "14-22",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }],
  "condition": [{
    "id": "2001",
    "type": "Uncut"
  }],
  "quantity": 1,
  "fabricType": "woven"
}, {
  "id": "0016",
  "brand": "Vogue",
  "name": "1484",
  "size": "14-22",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }],
  "condition": [{
    "id": "2001",
    "type": "Uncut"
  }],
  "quantity": 1,
  "fabricType": "woven"
}, {
  "id": "0017",
  "brand": "Lekala",
  "name": "4456",
  "size": "Custom",
  "type": [{
    "id": "1002",
    "type": "Top"
  }],
  "condition": [{
    "id": "2003",
    "type": "Printed"
  }],
  "quantity": -1,
  "fabricType": "woven"
}, {
  "id": "0018",
  "brand": "Lekala",
  "name": "5569",
  "size": "Custom",
  "type": [{
    "id": "1003",
    "type": "Jacket"
  }],
  "condition": [{
    "id": "2003",
    "type": "Printed"
  }],
  "quantity": -1,
  "fabricType": "woven"
}, {
  "id": "0019",
  "brand": "Lekala",
  "name": "5092",
  "size": "Custom",
  "type": [{
    "id": "1005",
    "type": "Skirt"
  }],
  "condition": [{
    "id": "2003",
    "type": "Printed"
  }],
  "quantity": -1,
  "fabricType": "woven"
}, {
  "id": "0020",
  "brand": "Lekala",
  "name": "5454",
  "size": "Custom",
  "type": [{
    "id": "1003",
    "type": "Jacket"
  }],
  "condition": [{
    "id": "2003",
    "type": "Printed"
  }],
  "quantity": -1,
  "fabricType": "woven"
}, {
  "id": "0021",
  "brand": "Lekala",
  "name": "5229",
  "size": "Custom",
  "type": [{
    "id": "1007",
    "type": "Intimates"
  }],
  "condition": [{
    "id": "2003",
    "type": "Printed"
  }],
  "quantity": -1,
  "fabricType": "woven"
}, {
  "id": "0022",
  "brand": "Lekala",
  "name": "2022",
  "size": "Custom",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }],
  "condition": [{
    "id": "2003",
    "type": "Printed"
  }],
  "quantity": -1,
  "fabricType": "woven"
}, {
  "id": "0023",
  "brand": "Lekala",
  "name": "4508",
  "size": "Custom",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }],
  "condition": [{
    "id": "2003",
    "type": "Printed"
  }],
  "quantity": -1,
  "fabricType": "woven"
}, {
  "id": "0024",
  "brand": "Lekala",
  "name": "4278",
  "size": "Custom",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }],
  "condition": [{
    "id": "2003",
    "type": "Printed"
  }],
  "quantity": -1,
  "fabricType": "woven"
}, {
  "id": "0025",
  "brand": "Lekala",
  "name": "4474",
  "size": "Custom",
  "type": [{
    "id": "1008",
    "type": "Coat"
  }],
  "condition": [{
    "id": "2003",
    "type": "Printed"
  }],
  "quantity": -1,
  "fabricType": "woven"
}, {
  "id": "0026",
  "brand": "Lekala",
  "name": "5234",
  "size": "Custom",
  "type": [{
    "id": "1007",
    "type": "Intimates"
  }],
  "condition": [{
    "id": "2003",
    "type": "Printed"
  }],
  "quantity": -1,
  "fabricType": "woven"
}, {
  "id": "0027",
  "brand": "Lekala",
  "name": "4533",
  "size": "Custom",
  "type": [{
    "id": "1002",
    "type": "Top"
  }],
  "condition": [{
    "id": "2003",
    "type": "Printed"
  }],
  "quantity": -1,
  "fabricType": "woven"
}, {
  "id": "0028",
  "brand": "Lekala",
  "name": "5958",
  "size": "Custom",
  "type": [{
    "id": "1002",
    "type": "Top"
  }],
  "condition": [{
    "id": "2003",
    "type": "Printed"
  }],
  "quantity": -1,
  "fabricType": "woven"
}, {
  "id": "0029",
  "brand": "Style Arc",
  "name": "5958",
  "size": "22",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }, {
    "id": "1006",
    "type": "Tunic"
  }],
  "condition": [{
    "id": "2001",
    "type": "Uncut"
  }],
  "quantity": 1,
  "fabricType": "woven"
}, {
  "id": "0030",
  "brand": "Thread Count",
  "name": "1501",
  "size": "16-24",
  "type": [{
    "id": "1001",
    "type": "Dress"
  }],
  "condition": [{
    "id": "2001",
    "type": "Uncut"
  }],
  "quantity": 1,
  "fabricType": "woven"
}]
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<main>
  <h1>Test Table</h1>
  <div ng-app="tableApp" ng-controller="patternController">
    <table>
      <tr>
        <th>Brand</th>
        <th>Name/ID</th>
        <th>Size</th>
        <th>Quantity</th>
        <th>Fabric type</th>
      </tr>
      <tr ng-repeat="pattern in pattern">
        <td>{{ pattern.brand }}</td>
        <td>{{ pattern.name }}</td>
        <td>{{ pattern.size }}</td>
        <td>
          <quantity value="pattern.quantity"></quantity>
        </td>
        <td>{{ pattern.fabricType }}</td>
      </tr>
    </table>
  </div>
</main>

相关问题
最新问题