Question

我有一個選擇2下拉與下面的標記：

<select id="selectByName" ui-select2="select2Options" ng-model="selectId" data-placeholder="Select item by name" style="width:250px"> 
    <option></option> 
    <option ng-repeat='item in items' data-show="{{item.show}}" value="{{item.id}}"> 
    {{item.name}} 
    </option>  
</select> 

而且JS包含以下內容：

$scope.items（一個具有ID陣列，一個布爾顯示屬性和名稱屬性）

和選擇2個選項：

select2Options : { 
     allowClear: true, 
     placeholder:"select a value", 
     formatResult: function(state) { 
      var $elem = angular.element(state.element), 
      isVisible = $elem.data('show'); 
      return isVisible ? '<span style="color:red">'+state.text+'</span>': 
           <span style="color:blue">'+state.text+'</span>'; 

     } 
}, 

好吧，ng-repeat正確更新了html標記，並將data-show屬性設置爲true或false，但formatResult函數不更新此值。 在html源代碼data-show="true"和formatResult函數$elem.data('show') = false;中，爲什麼每次select2打開時都會調用函數？

下面是一個解釋我的問題的解釋器：plnkr.co/edit/d0LxuhzdQh7hMdzOoxpr?p=preview。它看起來formatResult只在第一次打開select2之前正確更新結果一次。

Answer 1

編輯

http://plnkr.co/edit/6Vma1WTQWQw0HAIQUVxE?p=preview

$scope.select2options = { 
    allowClear: true, 
    placeholder: "select a value", 
    formatResult: function(state, container) { 
     var $elem = angular.element(state.element); 
     var scope = $elem.data('$scope'); 
     if (scope !== undefined) { 
     isVisible = scope.$eval($elem.data('show')); 
     $scope.dataShow[$elem.attr('value')] = isVisible; 
     $scope.updated++; 
     return isVisible ? '<span style="color:red">' + state.text + '</span>' : 
      ' <span style="color:blue">' + state.text + '</span>' 
     } 
    } 
    } 

的關鍵部分是從jqLit​​e元件抓住$scope數據，然後調用$eval，其評估在範圍的上下文中未解析的字符串表達式。如果我們使用$scope.$eval，它會使用控制器$scope，它不會有ng-repeat。通過從元素中抓取它，我們有一個可訪問ng-repeat的item屬性的範圍。

說了我不推薦使用這段代碼（有時jQuery小部件在使用angular時強迫你進入不愉快的角落）。同樣，如果您發現自己在控制器中操作angular.element或使用$element，則可能應該使用指令。然後我們再一次程序員必須處理非理想的約束（時間，金錢等），這些約束阻止我們「理想地」工作，因此考慮到您的上下文，這可能是一個體面的解決方案。

讓我知道，如果我的任何解釋沒有意義。

原始

http://plnkr.co/edit/vYTdxPwgwqZSgK5m9yk9?p=preview

這是你想要的嗎？

的JavaScript

$scope.items = [{ 
    id: 1, 
    show: false, 
    name: 'test1' 
    }, { 
    id: 2, 
    show: true, 
    name: 'test2' 
    }, { 
    id: 3, 
    show: true, 
    name: 'test3' 
    }]; 

    $scope.selections = [1, 2]; 

    $scope.getStyleForIndex = function (index) { 
    var item; 
    for (var i = 0; i < $scope.items.length; i++) { 
     if (i === index) { 
     item = $scope.items[i]; 
     break; 
     } 
    } 

    return item.show ? { color: "red" } : { color: "blue" }; 
    } 

    $scope.select2options = { 
    allowClear: true, 
    formatResult: function(item, container) { 
     var color = $scope.getStyleForIndex(parseInt(item.id, 10)).color; 
     container.html('<span style="color:' + color + '">RESULT ' + item.text + '</span>'); 
    }, 
    formatSelection: function(item, container) { 
     container.append($compile('<span ng-style="getStyleForIndex(' + item.id + ')">SELECTION ' + item.text + '</span>')($scope)); 
    } 
    } 

HTML

<div ng-repeat="item in items"> 
    {{ item.name }} 
    <input type="checkbox" ng-model="item.show" /> 
    </div> 

    <select ui-select2="select2options" ng-model="selections" style="width:200px" multiple="true" ng-options="i.id as i.name for i in items"></select> 
    {{selections}}