맞춤 옵션 템플릿이있는 각도 선택

개체 목록을 표시하는 하나의 선택 항목과 선택한 개체를 표시하는 단추가 있습니다. 그것은 작동합니다. 나는 그것을 어떻게맞춤 옵션 템플릿이있는 각도 선택

<select ng-model="selected"> 
    <option ng-repeat="item in items" value="{{item}}"> 
      {{item.name}} <span>Some nice data</span> 
    </option> 
</select>

얻을 수 있습니다 :

문제

내가이 시도하지만 JSON 개체 대신 문자열을 반환, 내가 선택 상자에 개체 이름보다 더 보여줄 필요가있다? 그것을위한 지침을 만들어야합니까? 선택 상자

var app = angular.module('app', []); 
 

 

 
app.controller('Test', function($scope) { 
 

 
    $scope.selected = null; 
 
    $scope.items = [{ 
 
    name: 'a', 
 
    value: 1, 
 
    something: "xyz" 
 
    }, { 
 
    name: 'b', 
 
    value: 2, 
 
    something: "xyz" 
 
    }, { 
 
    name: 'c', 
 
    value: 3, 
 
    something: "xyz" 
 
    }] 
 

 

 
    $scope.show = function() { 
 
    alert("selectec " + $scope.selected.name + ' with value ' + $scope.selected.value); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<html ng-app="app"> 
 

 
<body> 
 
    <div ng-controller="Test"> 
 
    <select data-ng-options="i.name for i in items" ng-model="selected"> 
 
    </select> 
 
    <button ng-click="show()">press</button> 
 
    </div> 
 
</body> 
 

 
</html>

출처

2014-11-26 Andres

에 추가 데이터없이 작동

내 코드는 그것을 선택에 대한 옵션 태그 내부에 HTML을 넣어 유효하지 않습니다. DIV 태그를 사용하거나 자신의 필요에 맞는 것을 직접 만들면됩니다. 또 다른 메모에서 drowdown의 목적은 데이터를 탐색하지 않기 때문에 UI를 다시 생각해 볼 수 있습니다.

출처

2014-11-26 19:58:22 Scott

ngOptions AngularJS 지시문에서 HTML을 출력 할 수 없습니다. 하지만합니다 (HTML 이스케이프 것을 알), 요소 레이블과 같이하는 함수를 사용하여 옵션의 내용을 사용자 정의 할 수 있습니다

좋은

var app = angular.module('app', []); 
 

 

 
app.controller('Test', function($scope) { 
 

 
    $scope.selected = null; 
 
    $scope.items = [{ 
 
    name: 'a', 
 
    value: 1, 
 
    something: "xyz" 
 
    }, { 
 
    name: 'b', 
 
    value: 2, 
 
    something: "xyz" 
 
    }, { 
 
    name: 'c', 
 
    value: 3, 
 
    something: "xyz" 
 
    }] 
 

 

 
    $scope.show = function() { 
 
    alert("selectec " + $scope.selected.name + ' with value ' + $scope.selected.value); 
 
    } 
 

 
    $scope.format = function(i) { 
 
    return i.name + '<span>Some nice data</span>'; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<html ng-app="app"> 
 

 
<body> 
 
    <div ng-controller="Test"> 
 
    <select data-ng-options="i as format(i) for i in items" ng-model="selected"> 
 
    </select> 
 
    <button ng-click="show()">press</button> 
 
    </div> 
 
</body> 
 

 
</html>

출처

2014-11-26 19:59:48

만 보여줍니다 ** ** 태그 – Andres

은 ** ng-bind-html ** 또는 ** $ sce **를 사용하여 추가 할 수 있습니까? – Andres

아니요, 지시문은 jQuery의'text' 함수를 사용하여'option' 콘텐츠를 렌더링하고'html' 함수를 사용하게하는 옵션이 없습니다. 소스를 확인하십시오 : https://github.com/angular/angular.js/blob/master/src/ng/directive/select.js –

맞춤 옵션 템플릿이있는 각도 선택

답변

관련 문제