Angularjs 选择特定的ng重复项目以在其他位置高亮显示它们

我有一个由ng repeat指令解析的列表。此列表可由用户筛选。这部分工作正常

过滤列表的第一项在页面中的其他位置高亮显示

我对以下方面有一些问题：

当用户单击列表中的某个项目时，突出显示的项目应替换为单击的项目，直到完成另一个筛选

JSFIDLE链路

函数MyCtrl（$scope）{
$scope.list=[{
id:'a 1'
}, {
id:'a 2'
}, {
id:'B3'
}];
$scope.itemFocus=函数（项）{
//我们不想在中继器中创建副本
//$scope.filteredItems[0]=项；
};
}
{{{filteredItems[0].id}

{{item.id}

请参见此处：

js:

html:

{{{filteredItems[selected].id}

{{item.id}

我不确定我是否理解您的需求，但类似的内容可能会有所帮助

然后

    <div ng-app>
        <div ng-controller="MyCtrl">
            <div>
                <input type="text" ng-model="searchItems" />

                <p ng-model="focused">{{focused.id}}</p>
            </div>
            <!-- some code -->
            <ul>
                <li ng-repeat="item in filteredItems = (list | filter:searchItems)" ng-click="itemFocus(item)">{{item.id}}</li>
            </ul>
        </div>
    </div>

{{focused.id}

{{item.id}

为什么这个不起作用@Mik378当有更多数据时，它会生成一个错误并打破过滤列表：错误：[ngRepeat:dupes]中继器中不允许重复。听起来不错，但是如果你点击“B4”，然后通过键入“a”来更新过滤器，突出显示的项目是空的：/the$watch，很好，谢谢，我想如果你更新答案中的链接，就可以了，我很乐意接受。是的，如果你感兴趣的话，这就是我的想法。@sylvester给出了一个完整的答案。

function MyCtrl($scope) {
    $scope.list = [{
        id: 'a 1'
    }, {
        id: 'a 2'
    }, {
        id: 'b 3'
    }, {
        id: 'b 4'
    }];
    $scope.$watch('searchItems', function () {
        $scope.selected = 0;
    });
    $scope.selected = 0;

    $scope.itemFocus = function (item) {
        $scope.selected = item;
    };
}

<div ng-app>
    <div ng-controller="MyCtrl">
        <div>
            <input type="text" ng-model="searchItems" />
            <p ng-if="filteredItems[selected]">{{filteredItems[selected].id}}</p>
        </div>
        <!-- some code -->
        <ul>
            <li ng-repeat="item in filteredItems = (list | filter:searchItems)" ng-click="itemFocus($index)">{{item.id}}</li>
        </ul>
    </div>
</div>

    function MyCtrl($scope) {
        $scope.list = [{
            id: 'a 1'
        }, {
            id: 'a 2'
        }, {
            id: 'b 3'
        }];
        //just initiating value, could also be set by ng-init in your html
        $scope.focused = $scope.list[0];
        $scope.itemFocus = function (item) {
            $scope.focused = item;

        };
    }

    <div ng-app>
        <div ng-controller="MyCtrl">
            <div>
                <input type="text" ng-model="searchItems" />

                <p ng-model="focused">{{focused.id}}</p>
            </div>
            <!-- some code -->
            <ul>
                <li ng-repeat="item in filteredItems = (list | filter:searchItems)" ng-click="itemFocus(item)">{{item.id}}</li>
            </ul>
        </div>
    </div>