Question

我有数据（比如项目列表），它来自$ http.get请求。我想要更改包含ng-repeat div下的项目的div的颜色。物品数量是随机的 我的代码
controller.js

$http.post("ServerUrl")
    .success(function(data) { 
    $scope.data = data;
    })
    .error(function(err) {
    alert(err);
    })

模板

<div ng-repeat="data in data">
{{data}}
</div>

我想要什么

我尝试了什么
好吧，我试图在$ scope中添加一些颜色并在模板中重复它们但是如果我在$ scope中放置了5种颜色，那么它在模板中仅着色5 div（按预期工作）。 所以我想一种方式，我可以随机重复从$ http请求返回的任意数量的项目的颜色。

Answer 1

您可以定义是否需要某些特定颜色，然后重复这些颜色。

 $scope.colorCodeArray = [
         "#339E42",
         "#039BE5",
         "#EF6C00",
         "#A1887F",
         "#607D8B",
         "#039BE5",
         "#009688",
    ];


  <div ng-repeat="data in data">
  <div ng-style="{background: colorCodeArray[$index % colorCodeArray.length]}" >{{data}}</div>
    </div>

Answer 2

您可以这样做：

这里的诀窍是public class SelectItemAdapter extends RecyclerView.Adapter<SelectItemAdapter.ItemHolder> { private List<String> itemsName, itemsQty, itemsPCode, itemPlant; private OnItemClickListener onItemClickListener; private LayoutInflater layoutInflater; //private List<DummyEntry> mDataset; private String[] mDataset; public ArrayList myItems = new ArrayList(); public SelectItemAdapter(Context context, String[] mDataset) { layoutInflater = LayoutInflater.from(context); itemsName = new ArrayList<String>(); itemsQty = new ArrayList<String>(); itemsPCode = new ArrayList<String>(); itemPlant = new ArrayList<String>(); this.mDataset = mDataset; } @Override public SelectItemAdapter.ItemHolder onCreateViewHolder(ViewGroup parent, int viewType) { View itemView = layoutInflater.inflate(R.layout.custom_row_selected_item, parent, false); return new ItemHolder(itemView, this, new MyCustomEditTextListener()); } @Override public void onBindViewHolder(SelectItemAdapter.ItemHolder holder, final int position) { holder.setItemName(itemsName.get(position)); holder.setItemQty(itemsQty.get(position)); holder.setItemPCode(itemsPCode.get(position)); holder.setItemPlant(itemPlant.get(position)); holder.myCustomEditTextListener.updatePosition(position); holder.numPicker.setText(mDataset[position]); } @Override public int getItemViewType(int position) { return position; } @Override public int getItemCount() { return itemsName.size(); } public Object getItemName(int position) { return itemsName.get(position); } public Object getItemPCode(int position) { return itemsPCode.get(position); } public Object getItemPlant(int position) { return itemPlant.get(position); } public void setOnItemClickListener(OnItemClickListener listener) { onItemClickListener = listener; } public OnItemClickListener getOnItemClickListener() { return onItemClickListener; } public interface OnItemClickListener { public void onItemClick(ItemHolder item, int position); } public void add(int location, String iName, String iQty, String iPCode, String iPlant) { itemsName.add(location, iName); itemsQty.add(location, iQty); itemsPCode.add(location, iPCode); itemPlant.add(location, iPlant); notifyItemInserted(location); } public void remove(int location) { if (location >= itemsName.size()) return; itemsName.remove(location); notifyItemRemoved(location); } public static class ItemHolder extends RecyclerView.ViewHolder implements View.OnClickListener { private SelectItemAdapter parent; TextView textItemName, txtPCode, txtAvailableQty, txtTempQty, txtPlant; Button bRemove; EditText numPicker; public MyCustomEditTextListener myCustomEditTextListener; public ItemHolder(View itemView, SelectItemAdapter parent, MyCustomEditTextListener myCustomEditTextListener) { super(itemView); this.parent = parent; textItemName = (TextView) itemView.findViewById(R.id.txtProductName); txtAvailableQty = (TextView) itemView.findViewById(R.id.txtAvailbleQty); txtPCode = (TextView) itemView.findViewById(R.id.txtPCode); txtPlant = (TextView) itemView.findViewById(R.id.txtPlant); bRemove = (Button) itemView.findViewById(R.id.bRemove); numPicker = (EditText) itemView.findViewById(R.id.numberPicker); this.myCustomEditTextListener = myCustomEditTextListener; this.numPicker.addTextChangedListener(myCustomEditTextListener); bRemove.setOnClickListener(this); } public void setItemName(CharSequence name) { textItemName.setText(name); } public void setItemQty(CharSequence name) { txtAvailableQty.setText(name); } public void setItemPCode(CharSequence name) { txtPCode.setText(name); } public void setItemPlant(CharSequence name) { txtPlant.setText(name); } public String getQtyNumber() { return numPicker.getText().toString(); } public CharSequence getItemName() { return textItemName.getText(); } public CharSequence getItemPCode() { return txtPCode.getText(); } @Override public void onClick(View v) { final OnItemClickListener listener = parent.getOnItemClickListener(); if (listener != null) { listener.onItemClick(this, getPosition()); } } } private class MyCustomEditTextListener implements TextWatcher{ private int position; public void updatePosition(int position) { this.position = position; } @Override public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) { mDataset[position] = charSequence.toString(); } @Override public void afterTextChanged(Editable editable) { } } }，告诉你迭代是什么。

$index

(function() {
  
  var app = angular.module('app', []);
  
  app.controller('MainController', MainController);
  
  function MainController() {
    
    var self = this;
    self.data = ['ABC', 'DEF', 'GHI', 'JKL', 'MNO', 'PQR'];
    self.style = function(index) {
      
      var red = index * 40;
      var green = index * 40;
      var blue = index * 40;
      
      var color = 'color: rgb('+red+', '+green+', '+blue+')';
      return color;
      
      }
    
    }
  
  })();

Answer 3

例如

<!DOCTYPE html>
<html ng-app="mainApp" lang="en">
<head>

    <title>Random Color</title>


<script src="angular.min.js"></script>

<style>

div {
   border: "2px solid black";
}

</style>    

<script>
     var app = angular.module('mainApp', []);
     app.controller('MyCtrlr', function ($scope, $http) {


                      //$http.get("YOUR_AJAX_URL").success(function(response){

                         $scope.randomColor = function(){
                           var color = "#"+((1<<24)*Math.random()|0).toString(16);
                           return color;

                         }

                         $scope.data = [111, 222, 333, 444, 555];

                         alert($scope.data);

                       //});

 });



  </script>

</head>



 <body ng-controller="MyCtrlr" >


    <div ng-repeat="data in data" style="background-color: {{randomColor()}}">
        Color {{data}}
    </div>

   </body>

</html>

Answer 4

以下是您可以尝试的另一种解决方案：

angular.module('myApp', [])
  .controller('AppCtrl', ['$scope',
    function($scope) {

      $scope.getRandomColor = function() {
        var randomNumber = getRandomNumber(0, $scope.colors.length - 1);
        console.log(randomNumber)
        return $scope.colors[randomNumber];
      };

      $scope.colors = ['#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688'];
      $scope.boxData = [{
        name: "Box 1"
      }, {
        name: "Box 2"
      }, {
        name: "Box 3"
      }, {
        name: "Box 4"
      }];

    }
  ]);

function getRandomNumber(min, max) {
  return Math.ceil(Math.random() * (max - min) + min);
}

.contact-box {
  width: 90px;
  height: 50px;
  dispaly: block;
  margin-bottom: 5px;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl">
  <div ng-repeat="b in boxData">
    <div class="contact-box" ng-style="{'background-color': getRandomColor() }">{{ b.name }}</div>
  </div>
</div>

JsFiddle

在具有未知数量的项目的ng-repeat内随机颜色Div

4 个答案: