リストのためのAngularJSウォッチ

Question

私はangleJSアプリケーションを実行しています。私はカラーピッカーを取って、div.myコードに選択された色を割り当てています。私たちは、特定のエントリのいずれかの色を選択した場合、すべてのrecords.Myコードがあるに

TS（typescriptです）

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コード

ファイルを次のようにコレクション（NG-リピート）について、その色が割り当てされます

<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

Answer 1

I赤DIV ...

まず、私は完全にコントローラ内部のウォッチャを削除します

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> 

最後に、私は非動的なdivの可否スタイルのCSSクラスを使用します。

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

または、あなたがそれらを動的に変更することを計画している場合、スタイルオブジェクトで public: Color を交換し、U iは私のUserTypeRecord配列にmycolorを取る必要があるわけ

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

と

ng-style="x.Style"