Question

我在角度js中实现了颜色代码选择器，并尝试根据之前选择的值设置颜色代码的焦点。例如，如果保存的颜色是蓝色，那么我必须在颜色选择器中将焦点设置为蓝色。

标记：

@Entity
public class Game implements Serializable {
    @Id
    @GeneratedValue(strategy=GenerationType.IDENTITY)
    private Long idGame;
    private double gameValue;
    @ManyToOne
    @JoinColumn(name="config")
    private GameConfiguration gameConfiguration;

    // Getters and setters ..
}

@Entity
public class GameConfiguration implements Serializable {
    @Id
    @GeneratedValue(strategy=GenerationType.IDENTITY)
    private Long confId;
    // and so on ..
    }

控制器：

<div class="tdata" ng-repeat="color in colors" 
  ng-class="{'selected':$index == selectedRow}" 
  ng-click="setClickedRow($index)" 
  style="background-color:{{color}};">
</div>

Plunker代码here。

因为我将所选行的硬编码为0.我将db中的颜色存储为十六进制。我想比较存储的颜色和我在范围中使用的颜色数组，并将焦点设置在颜色代码选择器中。

Answer 1

这就是你要找的东西

＆＃13;

// Code goes here

var app=angular.module('myApp',[]);
app.controller('myctrl', function($scope){
$scope.colors = [
        '#36342a',
        '#4f48d5',
        '#03bbbb',
        '#3eb308',
        '#f0d817',
        '#dd3333'
      ];
      //color coming from db
      $scope.dbColor = '#3eb308';//A color that exists in $scope.colors
        //To get index of selected color
      $scope.selectedRow = $scope.colors.indexOf($scope.dbColor);  // initialize our variable to null
       
      $scope.setClickedRow = function(index)
    {  //function that sets the value of selectedRow to current index
     $scope.selectedRow = index;
  }
});

＆＃13;

.tdata{width:25px;height:20px;border:1px solid #fff;
  float:left
}
.selected {
  background-image:none;
   border: 5px solid #e1e1e1;
}

＆＃13;

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="myctrl">
    <h1>Hello Plunker!</h1>

<div class="tdata" ng-repeat="color in colors"
ng-class="{'selected':$index == selectedRow}"
ng-click="setClickedRow($index)"
style="background-color:{{color}};">
  </div>



  </body>

</html>

＆＃13;

焦点未设置在颜色代码选择器中

1 个答案: