Question

我想将所选选项的文本设置为控制器变量，就像ngModel为所选选项的value属性执行此操作一样。

<div ng-controller="Subjects as ctrl">
  <select ng-model="ctrl.model.fieldId" text-model="ctrl.model.fieldName">
    <option value="1">yes</option>
    <option value="2">no</option>
  </select>
</div>

如果选择的第一个选项不是指令中的函数，如何将ctrl.model.fieldName设置为yes？该指令必须与ngModel一起使用。

我想要一种不使用ngOptions的方法，因为我的javascript中没有任何值数组，尽管我可以解析HTML并创建一个。

这个指令到目前为止：

(function () {
    angular
        .module('app')
        .directive('TextModel', TextModel);
    function TextModel($compile) {
        return {
            restrict: 'A',
            link: function ($scope, elem, attr) {
                elem.on('change', selectChanged);
                $scope.$on('$destroy', function () {
                    elem.off('change', selectChanged);
                });
                function selectChanged() {
                    var selectedText = elem.find('option:selected').text();
                    //YAY! I have the selected option's text
                    console.log(selectedText);
                    //now how can I set ctrl.model.fieldName = selectedText ??
                }
            }
        };
    };

})();

Answer 1

你不需要另外的指示。

最好将选择选项绑定到{key：value}数组或任何其他对象数组

见这里：https://docs.angularjs.org/api/ng/directive/ngOptions

然后，您可以将ng-model绑定到所选项目。

$scope.items = [
    {key : 1 , value : 'yes'},
    {key : 2 , value : 'no'}
]

<select ng-model="selectedItem" ng-options="item as item.value for item in items"></select>

Demo on Jsfiddle

<强>更新

如果您想使用自己的指令，可以使用这样的隔离范围：

function TextModel($compile) {
    return {
        restrict: 'A',
        scope : {
            'textModel' : '='
        },
        link: function (scope, elem, attr ) {
            elem.on('change', selectChanged);
            scope.$on('$destroy', function () {
                elem.off('change', selectChanged);
            });
            function selectChanged() {

                var selectedText = $(elem).find('option:selected').text();
                //YAY! I have the selected option's text

                //now how can I set ctrl.model.fieldName = selectedText ??
                scope.textModel = selectedText;
            }
        }
    };
};

顺便说一句，你的指令制定者应该是：

.directive('textModel', TextModel);

而不是：

.directive('TextModel', TextModel);

Demo on Jsfiddle

在没有ngOptions的指令中设置angular.js控制器变量

1 个答案: