ng-options를 사용하여 '저장된'선택된 항목에 글리프 아이콘을 추가하십시오.

이 시나리오가있는 경우 ...ng-options를 사용하여 '저장된'선택된 항목에 글리프 아이콘을 추가하십시오.

3 개의 요소가있는 드롭 다운입니다. 항목을 선택하고 저장 버튼을 클릭하면 드롭 다운 메뉴의 ng 모델이 html 태그로 바인드되어 ng 모델에 항목 이름 앞에 글리프콘 아이콘이 추가됩니다.

기본 구현을 시도했지만 완료 할 수 없었습니다.

모델

var app = angular.module('myApp', ['ngSanitize']) 
app.controller('myController', function($scope){ 
    $scope.name = 'Dylan' 

    $scope.saved = false 
    $scope.data = [{ 
     'name' : 'Item 1', 
     'color': 'red' 
    }, 
    { 
     'name' : 'Item 2', 
     'color': 'blue' 
    }, 
    { 
     'name' : 'Item 3', 
     'color': 'green' 
    }] 

    $scope.saveItem = function(item) { 
     // var index = $scope.data.indexOf(item); 
     // $scope.data[index].name = "&#10003;" + item.name 
     // console.log(index) 
     $scope.binder = " &#10003; " + item.name; 
    } 

})

<body ng-app="myApp"> 
    <div ng-controller="myController"> 
     <span class="glyphicon glyphicon-star" aria-hidden="true"></span> {{name}} 

    <div class="row"> 
     <div class="col-sm-2" > 
      <select class="form-control selectPicker glyphicon" 
        ng-model="selectedItem" 
        ng-options = "item as item.name for item in data"> 
      </select> 
     </div> 
    </div> 

    <br> 

    <button type="button" 
      class="btn btn-danger" 
      ng-disabled="!selectedItem"  
      ng-click="saveItem(selectedItem)"> 
      Save 
    </button> 


    <div ng-bind-html="binder"></div> 
</body>

Preview of result

는 내가 원하는 것은 이것이다보기 ....

현재 모델 인 'Item 1'은 바인더와 똑같이 대체/업데이트됩니다 (틱 포함).

또한 ng-repeat를 사용하여 동일한 작업을 시도했지만 전체 응용 프로그램에서 개체 속성을 사용해야하므로이 옵션을 사용할 수 없습니다. ng-repeat를 사용하면 이해할 때 선택한 값이 객체가 아닌 문자열 인 것 같습니다. 사전에 어떤 도움

감사 또는 제안 :

출처

2017-09-08 Dylan Busuttil

A) 당신은 당신이 선택에 Glyphicon를 추가하려면 다음이 간단하지 않다 내가 당신에게 here

을 가리킬 수 있음을 의미하는 경우 B) 간단한 UTF-8 기호를 추가하려면 아래에이 표시됩니다.

가장 효율적인 작업은 필요할 때마다 사용할 수 있도록 필요한 아이콘/기호를 보유 할 데이터 객체에 새로운 값을 추가하는 것입니다.

그래서 아이템 저장 기능에서 아이콘/심볼 값을 사용자 이름과 분리하여 저장합니다.

$scope.saveItem = function(item) { 
    var index = $scope.data.indexOf(item); 
    $scope.data[index].symbol= "&#10003;"; 
};

다음과 같이 출력물을 표시 할 수 있습니다.

<div ng-bind-html="selectedItem.symbol + ' ' + selectedItem.name"></div>

이후의 데이터는 다음과 같습니다.

$scope.data = [{ 
    'name' : 'Item 1', 
    'color': 'red', 
    'symbol': '&#10003;' 
}];

선택 옵션에서 기호를 렌더링하려면 아래 표시된 것처럼 맞춤 필터를 사용해야합니다.

app.filter('renderSymbol', function(){ 
    return function(val){ 
    var symbol = document.createElement('div'); 
    symbol.innerHTML = val; 
    return symbol.childNodes[0].nodeValue; 
    }; 
});

필터는 각 옵션의 값을 취할 것입니다 당신을 위해 기호를 렌더링 사업부에 넣어.도시 된 바와 같이

필터가 NG-옵션에서 사용된다 :

ng-options="item as (item.symbol + ' ' + item.name | renderSymbol) for item in data"

출력 :

Plunker :

여기

이 작업 예는

출처

2017-09-08 16:06:36 furkick

ng-options를 사용하여 '저장된'선택된 항목에 글리프 아이콘을 추가하십시오.

답변

관련 문제