AngularJS监视列表

我正在运行angularJS应用程序。我正在使用颜色选择器，并将选定的颜色分配给div。我的代码在单记录中运行良好。对于集合（ng repeat），如果我们为特定条目选择任何一种颜色，则该颜色将分配给所有记录

TS（类型脚本）文件

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

我会更好地显示您的代码，我想编写我的版本：

首先，我会完全删除控制器内的观察者

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" }
        ];
    }
}

…我会让angular帮你做这件事：

<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>

或者，如果您计划动态更改它们，请替换

public:Color

使用样式对象并替换

ng style=“{'background-color'：x.color}”

与

---

ng style=“x.style”

我更好地编写了您的代码，我想编写我的版本：

首先，我会完全删除控制器内的观察者

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" }
        ];
    }
}

…我会让angular帮你做这件事：

<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>

或者，如果您计划动态更改它们，请替换

public:Color

使用样式对象并替换

ng style=“{'background-color'：x.color}”

与

---

ng style=“x.style”

你是说我需要在我的UserTypeRecord数组中使用mycolor？到目前为止，它不在我的数组中，因此我无法接受x.mycolorI更新了我的答案，希望它会有帮助，祝您愉快。在HTML页面ng style=“{'background-color'：x.color}”中，如果我们使用'x'，它意味着'usertypearray'的obj，我们可以在ng repeat的帮助下访问该循环中该数组的元素。在我的数组中，我没有将颜色作为数组的一个元素，你想让我将颜色作为数组的一部分吗？是的，如果你看我的示例，你会看到我将“mycolor”移到了“usertypearray”中，如果这是你的意思，重命名为“color”。你的意思是我需要在UserTypeRecord数组中使用mycolor？到目前为止，它不在我的数组中，因此我无法接受x.mycolorI更新了我的答案，希望它会有帮助，祝您愉快。在HTML页面ng style=“{'background-color'：x.color}”中，如果我们使用'x'，它意味着'usertypearray'的obj，我们可以在ng repeat的帮助下访问该循环中该数组的元素。在我的数组中，我没有将颜色作为数组的一个元素，你想让我将颜色作为数组的一部分吗？是的，如果你看我的示例，你会看到我将“mycolor”移到“usertypearray”中，重命名为“color”，如果这是你的意思的话。