javascript - 在 Angular 中，给定一个对象数组和一个输入，如何绑定(bind)输入以使其代表所有对象的给定属性？

Question

给定一个对象数组(例如代表项目的选择)和一个​​输入，您如何绑定(bind)输入值以使其代表所有对象的给定属性？

输入应以以下方式显示状态:

• 如果此属性的所有值在所有对象上都相同，则显示该值
• 如果至少有一个值不相同，则将 input.value 设置为 'multiple'
• 如果所有值都未定义，则将 input.value 设置为 'none'

我有一个函数可以聚合范围内公开的给定属性的值:

// Return value (if all values are equal) or undefined (if not)
scope.getSelection('property')

我还有为所有对象设置值的函数:

scope.setSelection('property', value)

我找不到 ng-value、ng-model 和 ng-change 的组合，它允许我从 .getSelection() 获取并自动设置为 .setSelection()，所以我假设我必须写一个新指令。

解决这个问题的惯用方法是什么？

Answer 1

为了以后引用，我写一个完整的答案:

在相当现代的浏览器中实现此目的的一种方法是使用属性 getters/setters ( spec )。例如，概念验证实现将是:

假设 $scope 包含以下集合:

$scope.items = [
    {id: 1, prop: "a"},
    {id: 2, prop: "a"},
    {id: 3, prop: "a"}
];

我们想要操纵 item.prop 属性的集合。我们将另一个对象定义为:

$scope.form = {
    get aggregate() {
        var res, i;
        for( i=0; i < $scope.items.length; i++ ) {
            if( typeof(res) === "undefined" ) {
                res = $scope.items[i].prop;
            }
            else if( $scope.items[i].prop !== res ) {
                return "(multiple)";
            }
        }
        return res;
    },
    set aggregate(val) {
        var i;
        for( i=0; i < $scope.items.length; i++ ) {
            $scope.items[i].prop = val;
        }
    }
};

form.aggregate 属性现在有一个 getter 和 setter。这些函数通过遍历 $scope.items 来处理它们的值。 getter 比较这些值并返回公共(public)值(如果所有值都相同)或 "(multiple)"(如果至少有一个不同)。 setter 只是将给定值设置为所有属性。

fiddle :http://jsfiddle.net/52HE6/

还有一个改进的 (IMO) 版本，使用占位符而不是文字 "(multiple)":http://jsfiddle.net/52HE6/1/

这种模式可能可以被泛化/参数化(即没有固定名称 prop)，例如作为(警告:未经测试):

function aggregatorFactory($scope, collectionName, propName) {
    return {
        get aggregate() {
            var res, i;
            for( i=0; i < $scope[collectionName].length; i++ ) {
                if( typeof(res) === "undefined" ) {
                    res = $scope[collectionName][i][propName];
                }
                else if( $scope[collectionName][i][propName] !== res ) {
                    return "(multiple)";
                }
            }
            return res;
        },
        set aggregate(val) {
            var i;
            for( i=0; i < $scope[collectionName].length; i++ ) {
                $scope[collectionName][i][propName] = val;
            }
        }
    };
}