Angular:禁用文本输入

时间:2015-10-15 18:18:15

标签: angularjs

我有一个默认禁用的输入文本:

 <input type="text" ng-model="city.name" class="form-control"
                                   disabled
                                   name="name">

但我希望在输入国家/地区不为空时启用它:

   <input type="text" ng-model="country.name" class="form-control"
                                         >

我如何在角度控制器中执行此操作?我从这样的事情开始 在我的控制器中,但我不知道如果国家值不为空,如何启用它

  // Watch if the country value is not null
            $scope.$watch("country.name", function (value) {
                if (value !=null) {
                    // enable the city field
                }
            },true);

由于

1 个答案:

答案 0 :(得分:1)

您可以在不进入控制器的情况下使用ng-disabled:

const DealerStore = MyDataPersistenceLibrary.createStore({
  getInitialState() {
    return {
      dealerData: null
    };
  },

  getDealers() {
    // some action that sets the dealerData to an array
  }
});

const DealerInfoContainer = React.createClass({
  componentWillMount() {
    DealerStoreActions.getDealers();
  },

  _renderDealerInfo() {
    return (
      <DealerInfo {...this.state} />
    );
  },

  _renderLoader() {
    return (
      <p>Loading...</p>
    );
  },

  render() {
    const { dealerData } = this.state;

    return (
      dealerData
      ? this._renderDealerInfo()
      : this._renderLoader()
    );
  }
});

const DealerInfo = React.createClass({
  getDefaultProps() {
    return {
      dealerData: []
    };
  },

  _renderDealers() {
    const { dealerData } = this.props;

    return dealerData.map(({ name }, index) => <div key={index}>{name}</div>);
  },

  _renderNoneFound() {
    return (
      <p>No results to show!</p>
    );
  },

  render() {
    const { dealerData } = this.props;

    return (
      dealerData.length 
      ? this._renderDealers()
      : this._renderNoneFound()
    );
  }
});