angularjs make div readonly - where to put business logic -


i want make section readonly based on checkbox. typical example primary address , billing address. user enters primary address , can chose billing address same primary address.

see fiddle example.

html (primary address):

<fieldset ng-model="primaryadd">                     <legend>primary address:</legend>                     house#: <input type="text" ng-model="primaryadd.housenum"><br>                     street: <input type="text" ng-model="primaryadd.street"><br>                     state: <input type="text" ng-model="primaryadd.state"><br>                     zip: <input type="text" ng-model="primaryadd.zip"> </fieldset> 

html (same address)

<input type="checkbox" name="makesameasaddress" ng-model="makesameasaddresscheck" ng-click="makesameasaddress($event)">same above<br/> 

html (billing address)

<fieldset ng-model="billingaddress">                     <legend>billing address:</legend>                        <div>                                          <div style="font-size:small">if address same residence, prefill , make readonly</div>                         house#: <input type="text" ng-model="billingaddress.housenum" ng-readonly="makesameasaddresscheck"><br>                         street: <input type="text" ng-model="billingaddress.street" ng-readonly="makesameasaddresscheck"><br>                         state: <input type="text" ng-model="billingaddress.state" ng-readonly="makesameasaddresscheck"><br>                         zip: <input type="text" ng-model="billingaddress.zip" ng-readonly="makesameasaddresscheck">                     </div>                 </fieldset> 

the fiddle work. when click on "same above" checkbox, billing section gets address primary section , readonly. question why cannot put ng-readonly on fieldset or div surrounding inputs. have put ng-readonly on inputs. feel there must better way this.

maybe need create directive called "makesameasprimaryandreadonly". read business logic should sit in directives , not html directly or controllers. don't see point of doing this. unless reusing billing address in multiple places.

secondly, place initialize model , have schema share other controllers etc? imagine factory best this? thank you.

angular rocks !!

you create directive, might overkill purpose.

you can't apply ng-readonly div or fieldset css style. honestly, don't think it's bad way if have 4 inputs.

you can simplify logic checkbox (and eliminate ng-click event) using watch expression:

$scope.$watch('makesameasaddresscheck', function (newv, oldv) {     if (newv)          $scope.billingaddress = $scope.primaryadd;     else if (newv !== oldv)         $scope.billingaddress = angular.copy($scope.primaryadd);            }); 

notice when turn checkbox on, set both scope variables reference same object. when make modifications primary address, it's automatically updated in billing address.

when turn checkbox off, make copy of primary address. can edited independently.

http://jsfiddle.net/fcsgz/

business login in controllers fine. in fact, that's should be.

you can initialize model in service, created "factory" function.


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -