将角度模型绑定到引导选项卡内容

时间:2015-08-03 21:09:31

标签: javascript asp.net-mvc angularjs twitter-bootstrap

我需要将我的角度模型绑定到ASP MVC中的部分视图。我有两个模型:

sacAppController.ListModel = {
        TypeSacList: [],
        TypeSac: {
            Id: 0,
            Label: ""
        }
    };
    sacAppController.MainModel = {
        TypeSacList: [],
        TypeSac: {
            Id: 0,
            Label: ""
        },
        Process: {
            Id: 0,
            Label: ""
        },
        Product: {
            Id: 0,
            Label: ""
        },
        Customer: {
            Id: 0,
            Label: ""
        },
        IdentificationTypeList: [],
        IdentificationType: {
            Id: 0,
            Label: ""
        },
        IdentificationNumer: "",
        PersonTypeList: [],
        PersonType: {
            Id: 0,
            Label: ""
        }
    };

而且我还有一个主模型,它有两个属性,每个模型都是我在下面发布的:

ViewModel = {
            tabs:
                [
                    { id: 1, title: "Lista", viewId: "divViewList", model: sacAppController.ListModel },
                    { id: 2, title: "Nuevo", viewId: "divViewNew", model: sacAppController.MainModel }
                ]
        };

在我的HTML代码中,我有以下内容:

<ul class="nav nav-tabs">
        <li ng-repeat="tab in src.ViewModel.tabs" class="{'FondoGrisOscuro' : src.ViewModel.tabs[$index].id == tab.id }" style="height: 38px; text-align: center; width: 125px;">
            <a href="#{{tab.viewId}}" data-toggle="tab">
                <span class="{'active': src.ViewModel.tabs[$index].id == tab.id }">{{tab.title}}
                </span>
            </a>
        </li>
    </ul>

    <div class="tab-content">

        @Html.Partial("~/Views/Sac/_PartialSacList.cshtml")

        @Html.Partial("~/Views/Sac/_PartialSacCreate.cshtml")

    </div>

我的部分例子是:

div id="divViewNew" class="tab-pane fade in" style="margin-top: 8px" ng-model="tab.model">
    <div class="row" style="margin-bottom: 1.5%">
        <div class="col-md-3">
            <label class="EtiquetaTextoTablaNegrita">Tipo</label>
            <br/>
            <select ng-model="TypeSac" ng-options="x as x.Label for x in TypeSacList">
            </select>
        </div>
        <div class="col-md-3">
            <label class="EtiquetaTextoTablaNegrita">Proceso</label>
            <img src="~/img/lado1.png" alt="" onclick=" utiAbrePopUpBuscar('Proceso', 'SetProcess', '');return false;; "/>
            <img src="~/img/limpiar.png" alt=""/>
            <br/>
            <input type="text" class="CajaTexto" style="width: 225px;" value="{{Process.Label}}"/>
        </div>
        <div class="col-md-3">
            <label class="EtiquetaTextoTablaNegrita">Producto</label>
            <img src="~/img/lado1.png" alt="" onclick=" utiAbrePopUpBuscar('Producto', 'SetProduct', '');return false;; "/>
            <img src="~/img/limpiar.png" alt=""/>
            <br/>
            <input type="text" class="CajaTexto" style="width: 225px;" value="{{Product.Label}}"/>
        </div>
        <div class="col-md-3">
            <label class="EtiquetaTextoTablaNegrita">Nombre cliente o Usuario</label>
            <br/>
            <input type="text" class="CajaTexto" style="width: 225px;" value="{{Customer.Label}}"/>
        </div>
    </div>

但实际上我无法将我的模型绑定到我的标签内容。

如何解决这个问题?

{{UPDATE}}

我真的来自淘汰赛...我正在研究这样的视图模型:

(function (sacAppController) {

    sacAppController.App = {};
    sacAppController.ListModel = {
        TypeSacList: [],
        TypeSac: {
            Id: 0,
            Label: ""
        },
        IdentificationTypeList: [],
        IdentificationType: {
            Id: 0,
            Label: ""
        },
        PersonTypeList: [],
        PersonType: {
            Id: 0,
            Label: ""
        },
        PqrSacChanelList: [],
        PqrSacChanel: {
            Id: 0,
            Label: ""
        },
        TipologySacList: [],
        TipologySac: {
            Id: 0,
            Label: ""
        },
    };
    sacAppController.MainModel = {
        TypeSacList: [],
        TypeSac: {
            Id: 0,
            Label: ""
        },
        Process: {
            Id: 0,
            Label: ""
        },
        Product: {
            Id: 0,
            Label: ""
        },
        Customer: {
            Id: 0,
            Label: ""
        },
        IdentificationTypeList: [],
        IdentificationType: {
            Id: 0,
            Label: ""
        },
        IdentificationNumer: "",
        PersonTypeList: [],
        PersonType: {
            Id: 0,
            Label: ""
        },
        ReportedBy: {
            Id: 0,
            Label: ""
        },
        Area: {
            Id: 0,
            Label: ""
        },
        Office: {
            Id: 0,
            Label: ""
        },
        FilingDate: "",
        PqrSacChanelList: [],
        PqrSacChanel: {
            Id: 0,
            Label: ""
        },
        ExtensionDate: "",
        ExpirationDate: "",
        TipologySacList: [],
        TipologySac: {
            Id: 0,
            Label: ""
        },
        AditionalDescriptienFieldList: [],
        Description: "",
        SaveCommand: function () { }
    };

    sacAppController.Init = function () {
        sacAppModule.App = angular.module("SacAppModule", ["SacControllerModule", "SacServiceModule"]);
    };

    sacAppController.sacController = function (service) {
        var self = this;

        self.ViewModel = {
            init: function() {



            },
            tabs:
                [
                    { id: 1, title: "Lista", viewId: "divViewList", model: sacAppController.ListModel },
                    { id: 2, title: "Nuevo", viewId: "divViewNew", model: sacAppController.MainModel }
                ]
        };
    };

    sacAppController.SetUrl = function (data) {

    };

    sacAppController.Init = function () {
        sacAppController.App = angular.module("SacControllerModule", []);
        sacAppController.App.controller("SacController", ["SacService", sacAppController.sacController]);
    };

}(window.sacAppController = window.sacAppController || {}));

1 个答案:

答案 0 :(得分:0)

解决

只是推杆问题应该是你的数据:

ng-model="src.ViewModel.tabs[1].model.Product.Label"