CODEWITHSUNDEEP
javascriptangularjs
Ryan Drake
Ryan Drake

Reputation: 643

Angular: Prevent editing input field on page edit

I'm using an Angular file for both my create and edit page, but was wondering if there's a way to prevent a user editing the name of a Geo Segment on the /edit page.

enter image description here

geo-region-detail.html:

<nav>
    <a href="#">Geo Segments</a> :
  </nav>

  <h1 class="geo-region-name">{{ geoRegion.name || 'Create Geo Segment' }}</h1>
  <form ng-submit="updateOrAddGeoRegion()" id="regionForm">

    <div class="row">
      <div class="control-group span2">
        <label class="control-label label-unstyled font-size-14" for="inputId">Label</label>
        <div class="controls">
          <input type="text" id="inputId" placeholder="Short name" class="input-small" value="{{ geoRegion.label }}" ng-model="geoRegion.label" required="required">
        </div>
      </div>
      <div class="control-group span4">
        <label class="control-label label-unstyled font-size-14" for="inputName">Name</label>
        <div class="controls">
          <input type="text" id="inputName" placeholder="Region Name" class="input-large" value="{{ geoRegion.name }}" ng-model="geoRegion.name" required="required">
        </div>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label label-unstyled font-size-14" for="inputAddress">Address</label>
      <div class="controls">
        <input type="text" id="inputAddress" placeholder="Address" class="input-xlarge" value="{{ geoRegion.address }}" ng-model="geoRegion.address">
        <google-map-geocoder></google-map-geocoder>
      </div>
    </div>

location-edit.js:

$scope.newGeoRegion = true
$scope.geoRegionId = ''
$scope.hours = Hours


console.log('$scope.hours', $scope.hours)

$scope.geoRegion = {
  app_id: $scope.app_id
  geoRegion_id: '',
  latitude: 37.7879938,
  longitude: -122.40743739,
  name: '',
  address: '',
  radius: 500,
  customer_id: $scope.customer_id,
  active_daily_clear: false
}

Upvotes: 1

Views: 2396

Answers (1)

bhantol
bhantol

Reputation: 9616

Exactly as per @Ian but improved for '' value an other reasons

ng-disabled="isEdit(geoRegion)"

then in the controller

 $scope.isEdit = function(geoRegion) {

            if (angular.isUndefined(geoRegion.geoRegion_id))
                return true;
            if (geoRegion.geoRegion_id == '') 
                return true;

            return false;
 };

If you decide to use a different way to detect the edit your isEdit() fn is good enough to shield that change from the View (html)

Upvotes: 3

Related Questions