Question

所以我刚刚开始学习Angular JS而且我遇到麻烦做一些应该非常简单的事情，但我无法弄清楚如何去做。这是我的问题......

我有一个对象数组，我可以使用ng repeat显示数据。

 <div ng-repeat="computer in workbench.computers | orderBy:'computer.benchid'">
     <computer ng-show="tab.isSelected({{ computer.computer.benchid }}) || tab.isSelected(0)"></computer>
</div>

在计算机元素内部，我有一个{{ computer.benchid }}属性，我可以很好地显示。

这是计算机元素：

<div class="widget col-lg-4">
<div class="widget-head br-green">
    <h3><i class="fa fa-desktop"></i> <b>{{ computer.computer.make }} - </b> {{ computer.computer.benchid }}</h3>
</div>
<div class="widget-body">
    <p>Processor: {{ computer.computer.processor }}</p>
    <p>Ram: {{ computer.computer.ram }}</p>
    <p>Hard Drive: {{ computer.computer.hard_drive }}</p>
    <p>Serial Number: {{ computer.computer.serial_number }}</p>
    <p>Product Key: {{ computer.computer.windows_product_key }}</p>
    <p><b>Notes:</b></p>
    <p>{{ computer.computer.computer_notes }}</p>
</div>
<div class="widget-foot">
    <p> Last updated at...</p>
</div>

我的问题是benchid是一个从1到10的整数，我希望将值更改为使用伪代码的工作台示例的名称： if benchid === 1 show: "Workbench #1" 如何才能做到最好？

这是我的控制器：

    app.controller('WorkbenchController', ['$http', function($http){
    var workbenches = this;
    workbenches.computers = [];
    // Request the computers
    // Each of them has an object that has a computer
    $http.get('/api/computer').success(function(data) {
        workbenches.computers = data.computers;
    });
}]);

编辑：

getWorkbenchName（）函数：

<script>
function getWorkbenchName(workbenchNumber) {
    switch(workbenchNumber) {
        case 1:
            return "Workbench #1";
        case 2:
            return "Workbench #2";
        case 3:
            return "Workbench #3";
        case 4:
            return "Workbench #4";
        case 5:
            return "Laptop Workbench";
        case 6:
            return "Bla's Desk";
        case 7:
            return "Bleh's Desk";
        case 8:
            return "Mac Workbench";
        case 9:
            return "Workroom Shelf";
        case 10:
            return "Finished Room";
    }
    return null;
}

Answer 1

因为这似乎是你可能在应用程序的各个部分使用的东西，我写了this plunker来展示如何将工作台名称存储在工厂中，然后可以在整个应用程序中使用

app.factory('WorkbenchNames', function(){
  var factory = this;
  factory.workbenches = {
    1:"Workbench #1",
    2:"Workbench #2",
    3:"Workbench #3",
    4:"Workbench #4",
    5:"Laptop Workbench",
    6:"Bla's Desk",
    7:"Bleh's Desk",
    8:"Mac Workbench",
    9:"Workroom Shelf",
    10:"Finished Room"
  };
  factory.getWorkbenchName = function(id){
    if(factory.workbenches[id])
      return factory.workbenches[id];
    else
      return 'Unknown Workbench'; // You could put a default here
  };
  return {
    workbenches: factory.workbenches,
    getWorkbenchName: factory.getWorkbenchName
  }

});

我将控制器中的一个函数绑定到服务返回的函数，以便能够从UI调用它。

app.controller('MainCtrl', ['$scope', 'WorkbenchNames', function($scope, WorkbenchNames) {
  this.computers = [{id: 1, benchid: 1}, {id:2, benchid: 10}, {id: 13, benchid: 13}];
  this.getWorkbenchName = WorkbenchNames.getWorkbenchName;
}]);

然后可以在重复内部调用它

<body ng-controller="MainCtrl as main">
    <div ng-repeat="computer in main.computers">
        <b>{{computer.id}}</b>
        <br />
        <b>{{ main.getWorkbenchName(computer.benchid) }}</b>
        <br />
    </div>
</body>

我喜欢这种方法，因为它将定义拉出来用于代码中的其他位置。它也可以重构并从数据存储区加载，然后在应用程序的整个生命周期内可用。

根据ng-repeat中的数据修改元素

1 个答案: