Documentation:Overriding AngularJS MDriven Turnkey Views

This is the original generic view we use – use this as a starting point when stirring things up:

@using Eco.MVC
@model AngularModel
@{ Layout = null; }

<h3>{{root._ViewModelPresentation}}</h3>
<form > <!--The only reason for having a form is the ability to simulate a 
            postback so that validation is triggered and the error bubbles may show-->
        <!--Body content-->
        <div id="floatingRectangle" ng-show='root._Admin.Loading()'>
            <img src='~/Content/ajax-loader.gif' /></div>
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-2" style="vertical-align:top;">
                @Html.AngualarUIActions(Model)
            </div>
            <div class="col-md-10" style="padding:10px;border-left: lightgray thin solid ;">
                                      @Html.AngualarUI(Model)</div>
          </div>
          <div class="row">
            <div class="col-md-offset-2 col-md-10">
                      @Html.DisplayErrorsWarningsInfos(Model)@*Error,Warning,Info constraints*@</div>
          </div>
        </div>  
</form>
@Html.Partial("_DeveloperInfoPartial")

Taking a closer look at the parts:

We use Bootstrap to make the original UI responsive – that is why there are no table elements , only div elements.

The data you have access to in your html page is strictly derived from the ViewModel.

If your ViewModel is defined like this:

then you can expect to find data bindable with AngularJS like this:

root.RegistrationNumber, root.KilometersRun etc

To declare an input id that binds to RegistrationNumber you would go:

<input ng-model=”root.RegistrationNumber”/>

But in the ViewModel you also have the enable expression that you probably want to use:

<input ng-model=”root.RegistrationNumber” ng-disabled=”!root.VM_Status.EditOneCar_RegistrationNumber_Enabled”/>

And then you have the visible expression:

<input ng-model=”root.RegistrationNumber” ng-disabled=”!root.VM_Status.EditOneCar_RegistrationNumber_Enabled” ng-show="root.VM_Status.EditOneCar_RegistrationNumber_Visible" />

… do not forget the style:

<input ng-model=”root.RegistrationNumber” ng-disabled=”!root.VM_Status.EditOneCar_RegistrationNumber_Enabled” ng-show="root.VM_Status.EditOneCar_RegistrationNumber_Visible" ng-class="root.VM_Status.EditOneCar_RegistrationNumber_Style"/>

This is how we define select controls (Combobox) for setting the Brand in the above ViewModel:

<select ng-model="root.Brand" ng-options="opt.GetOId() as opt.Name for opt in root.BrandPickList" ></select>

Of course you may use disable, show and style for this as well.

This is how we do grids:

       <table>
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Length</th>
            <th>Genre</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="video in root.AllVideo">
            <td>  <input type="checkbox" name="input" ng-model="video.vCurrent"></td>
            <td>  {{ video.Name }}        </td>
            <td>  {{ video.Length }}  </td>
            <td>  {{ video.Genre }}         </td>
          </tr>
        </tbody>
      </table>