AngularJS手錶列表

Question

我正在運行angularJS應用程序。我正在採用顏色選擇器並將所選顏色分配給div.my代碼對於單個記錄工作正常。對於集合（NG-重複），如果我們選擇特定條目的任何一種顏色，然後該顏色分配給所有records.My代碼如下

TS（打字稿）文件

let mainAngularModule = angular.module("acc-management", ['ngMaterial', 'ngRoute']); 

mainAngularModule.config(routeConfig); 

routeConfig.$inject = ['$routeProvider']; 
function routeConfig($routeProvider, $locationProvider) { 
    $routeProvider 
     .when('/it', { 
      templateUrl: 'linkmanager.html' 
     }) 
     .when('/UserDefinedElement', { 
      templateUrl: 'UserDefinedElementType.html', 
      controller: 'userdefinedelementtype as UDETController' 
     }) 
} 

class UserTypeRecord { 
    public Id: number; 
    public Name: string; 
    public colorcode: any; 
} 


class UserDefinedElementTypeController { 
    private url: string; 
    private token: string; 
    public static $inject = ["$scope", '$http', '$q']; 
    private TestString: any; 

    public mycolor: string = "#f0f0f0"; 
    public divStyle: any; 
    public usertypearray: UserTypeRecord[]; 


    constructor(private $scope: ng.IScope) { 
     this.url = "https://apidev.smartfacts.com/sfit/"; 

     this.watchForColor(); 

     this.usertypearray = [ 
      { Id: 1, Name: "bhushan" }, 
      { Id: 2, Name: "suryakant" } 
     ]; 
    } 

    private watchForColor() { 

     this.$scope.$watch(() => this.mycolor, 
      (newVal, oldval) => { 
       console.log('this.scope', this.$scope); 
       this.divStyle = { 
        'background-color': newVal, 
        'color': 'white', 
        'width': '100px', 
        'height': '100px', 
        'font-size': 'large' 
       } 
      }); 

    } 

} 

HTML代碼

<div class="demo-md-panel-content"> 
      <table> 
       <thead> 
        <tr> 
         <th style="width:15%">Symbol</th> 
         <th style="width:15%">Name</th> 
         <th style="width:15%">Color</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat="x in UDETController.usertypearray"> 
         <td style="text-align:center"> 
          <span ng-style="UDETController.divStyle">Testing</span> 
         </td> 
         <td> 
          <input type="text" ng-model="x.Name" /> 
         </td> 
         <td> 
          <input type="color" ng-model="UDETController.mycolor" /> 
         </td> 

         </td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 

當我選擇特定的行/記錄的顏色只是顏色應該被分配或適用於特定的（行）的div它不應該被分配給其他（行）DIV

Answer 1

我紅你的代碼更好，我想我寫的版本：

首先，我會徹底清除控制器內的守望者...

let mainAngularModule = angular.module("acc-management", ['ngMaterial', 'ngRoute']); 

mainAngularModule.config(routeConfig); 

routeConfig.$inject = ['$routeProvider']; 
function routeConfig($routeProvider, $locationProvider) { 
    $routeProvider 
     .when('/it', { 
      templateUrl: 'linkmanager.html' 
     }) 
     .when('/UserDefinedElement', { 
      templateUrl: 'UserDefinedElementType.html', 
      controller: 'userdefinedelementtype as UDETController' 
     }) 
} 

class UserTypeRecord { 
    public Id: number; 
    public Name: string; 
    public Color: any; 
} 


class UserDefinedElementTypeController { 
    private url: string; 
    private token: string; 
    public static $inject = ["$scope", '$http', '$q']; 
    private TestString: any; 
    public usertypearray: UserTypeRecord[]; 


    constructor(private $scope: ng.IScope) { 
     this.url = "https://apidev.smartfacts.com/sfit/"; 

     this.usertypearray = [ 
      { Id: 1, Name: "bhushan" }, 
      { Id: 2, Name: "suryakant" } 
     ]; 
    } 
} 

...我會讓角度做工作你：

<div class="demo-md-panel-content"> 
      <table> 
       <thead> 
        <tr> 
         <th style="width:15%">Symbol</th> 
         <th style="width:15%">Name</th> 
         <th style="width:15%">Color</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat="x in UDETController.usertypearray"> 
         <td style="text-align:center"> 
          <span ng-style="{'background-color': x.Color}">Testing</span> 
         </td> 
         <td> 
          <input type="text" ng-model="x.Name" /> 
         </td> 
         <td> 
          <input type="color" ng-model="x.Color" /> 
         </td> 

         </td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 

最後我會使用一個CSS類非動態的div禮風格：

'color': 'white', 
'width': '100px', 
'height': '100px', 
'font-size': 'large' 

，或者，如果您計劃動態改變它們，有風格對象替換 public: Color 並更換

ng-style="{'background-color': x.Color}"

與

ng-style="x.Style"