CODEWITHSUNDEEP
angularjs
murtaza52
murtaza52

Reputation: 47431

Creating master detail in angular using the model

Given an object below - 

function PersonCtrl(){ 
  $scope.persons = [{name: "Mike", age:21, 
                   occupation:{qualification: "engineer", company:"Intel"}}];  
}

and the DOM below - 

<ul>
   <li ng-repeat="person in persons">
      Name : {{person.name}}
      <div ng-model="person.occupation">
        Qualification : {{person.occupation.qualification}}
      </div>
    </li>
</ul>

I have a list of persons whose names have to be displayed in the list. Now I will initially load the data without any details, in this case qualification of the person.

When someone clicks on the person's name, I will retrieve the persons details. I would like to just change the model, ie add the qualification details to that person's model, and angular to then create the DOM.

One way to control this is use the ng-show, and set its expression, so that it only shows the qualification div, if and when the qualification object has values. However this will also lead to the details div being created for every person, and thus bad for performance.

Is there a way that the dom is created / destroyed by angular when an expression evaluates to true or false ?

Upvotes: 1

Views: 1741

Answers (2)

enigment
enigment

Reputation: 3646

If the detail data is small, and there's no huge cost to getting it, or rules about whether the current user is allowed to see it, then I'd say render it and just hide it initially. Keeping it collapsed just lets the user not think about that detail unless they want it for certain records.

If it's big, or expensive to retrieve/calculate, or there are rules prohibiting some users from seeing certain details, that's different. In that case, I'd render only the "button" to access it, and load the details via ajax when requested.

Upvotes: 0

pkozlowski.opensource
pkozlowski.opensource

Reputation: 117370

If we want to physically remove / add parts of the DOM conditionally the family of ng-switch directives (ng-switch, ng-switch-when, ng-switch-default) will come handy.

Upvotes: 2

Related Questions