1

我正在尝试创建一个具有选择（下拉菜单）的指令，当您选择其中一个选项时，它将改为输入。

下拉列表的值为 1-12，其中一个值为“更多...”，当用户选择“更多...”时，选择应更改为输入。

问题是变化永远不会发生。

我在 plunker 中有我的代码供人们玩：http ://plnkr.co/edit/3SyFIYULDHMKgkJmtPtP?p=preview

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

app.controller( 'myCtrl', [ '$scope', function ( $scope ){ // simple controller
  $scope.value = '0';
  $scope.$watch('value', function(newValue, oldValue){
      console.log('watch fired in controller', newValue); // write the new value on change
  });
}]); 

app.directive('selectSwitch', function () { // the directive
  return {
  restrict: 'E', 
  template: '<div>'+  // template should know to switch between input and select
        '<input ng-model="myModel" ng-if="showInput" />'+ 
        '<select ng-model="myModel" ng-if="!showInput">'+
          '<option ng-repeat="value in selectSwitchValues" value="{{value}}">{{value}}<option>'+
        '<select>'+
      '<div>',
  scope: { 
      myModel: '=', // tie it to my model
  },
  link: function (scope, elem, attrs) {
    scope.selectSwitchValues = ['1','2','3','4','5','6','7','8','9','10','11','12','more...']; // values for select
    scope.showInput = false; 
    scope.$watch('myModel', function(newValue, oldValue){ // watch for changes in directive
      console.log('watch fired in directive');
      if(scope.myModel === "more..."){
        console.log("more");
        scope.showInput = true;
      }
      else {
        console.log(scope.myModel);
      }
    });
  }
  };
});

我也用 ng-switch 尝试过，但也没有运气：

template: '<div ng-switch on="showInput">'+
    '<input ng-model="myModel" ng-switch-when="showInput">'+ 
    '<select ng-model="myModel" ng-switch-default>'+
        '<option ng-repeat="value in selectSwitchValues" value="{{value}}">{{value}}<option>'+
    '<select>'+
    '<div>',
4

2 回答 2

1

这里有几个问题......

1) 要myModel正确更改 的值，请使用ngOptions代替ngRepeat。

2）ngIf（和ngSwitch）创建一个新的子范围，所以myModel没有正确更新。使用ngShow，ngHide而不是...

template: '<div>'+
    '<input ng-model="myModel" ng-show="showInput">'+  
      '<select ng-model="myModel" ng-hide="showInput" ng-options="value for value in selectSwitchValues">'+
      '<select>'+
  '<div>',

3）value需要传递到指令中......

<select-switch my-model='value'></select-switch>

更新的 Plunker

于 2014-05-16T16:12:15.110 回答
1

正如@Anthony 已经指出的那样，由于使用了 ng-if new child scope，所以 mymodel 没有更新。如果您想一直使用 ng-if 进行编译以用于特定目的，您可以使用

$parent.myModel

模板如下

template: '<div>'+
    '<input ng-model="$parent.myModel" ng-if="showInput">'+ 
      '<select ng-model="$parent.myModel" ng-if="!showInput" ng-options="value for value in selectSwitchValues">'+
      '<select>'+
  '<div>',

Plunkr

于 2014-05-16T16:23:02.520 回答