AngularJS - 在ng-include模板中綁定表格範圍

我對Angular相當陌生，我一直在將Zurb的基礎和令人討厭的JQuery移植到Angular中。我試圖加載我的webform的每個部分作爲模板，同時仍然將字段綁定到範圍。AngularJS - 在ng-include模板中綁定表格範圍

app.coffee：

app = angular.module('plunker', []); 

app.controller 'MainCtrl', ($scope) -> 
    # pre-loaded form data 
    $scope.data = 
    primInv: 
     vacation: false 
    funding_opportunity: 
     sponsor: "sponsor name" 

    # details about different sections of the form 
    $scope.sections = [ 
    { 
     name: "Principal Investigator" 
     details: "Please explain who you are and when you need funding." 
     formSection: "principal-investigator" 
    } 
    { 
     name: "Funding Opportunity" 
     details: "Please provide information about the funding opportunity to which you plan to apply." 
     formSection: "funding-opportunity" 
    } 
    ] 

    # get the url for the section template 
    $scope.sectionUrl = ($index) -> 
    return $scope.sections[$index].formSection + '-section.html'

的index.html體：

<form name="mainForm" 
    data-abide 
    ng-controller="MainController" 
    novalidate> 

<div ng-repeat="section in sections track by $index"> 
    <seperator ng-if="$index > 0"></seperator> 
    <div class="row"> 
    <div class="large-4 medium-12 columns"> 
     <div class="row"> 
     <h4>{{ section.name }}</h4> 
     </div> 
     <div class="row"> 
     <p>{{ section.details }}</p> 
     </div> 
    </div> 

    <p>{{ sectionUrl($index) }}</p> 
    <div class="large-8 medium-12 columns"> 
     <div ng-include src="sectionUrl($index)"></div> 
    </div> 
    </div> 
</div>

形式的部分被動態地從存儲關於每個區段的基本信息JSON對象包括

第一部分完美地工作，當我進入輸入字段時，範圍被更新，我們可以在測試元素中看到它。從委託研究者section.jade

樣本輸入：

label(for='era_commons_id') 
    | eRA Commons ID 
    small if Federal 
    input(type='text', 
     ng-model='data.prinInv.federal_id')

第二部分不工作的。似乎沒有任何約束力。我在這裏做錯了什麼？

樣品輸入從資金，機會，section.jade

label(for="funding_opportunity") 
    | Funding Opportunity 
    input(type="text", 
     ng-model: 'data.funding_opportunity.details', 
     name="funding_opportunity", 
     placeholder="Funding Opportunity")

我敢肯定，這是一個菜鳥的問題，因爲我是相當新的角度，但我一直在做這個了而它的開始讓我瘋狂！

所有其他頁面包括包括部分都可以在Plunker

來源

2015-05-20 AgrahamLincoln

一個plunkr將是不錯的實際測試你的代碼，但是我在您的示例代碼，發現一個錯字：

納克-model： 'data.funding_opportunity.details'，

應該

NG-模型=「data.funding_opportunity.details」，

檢查是否正常工作通過糾正錯字否則請提供一個工作示例

來源

2015-05-20 14:07:44 rmuller

在最下面有一個plunker鏈接 – aw04

它在你改變ng模型的時候工作：到ng-model =：http://plnkr.co/edit/NJk5ASNsptsdZx4d2fTg?p=preview – rmuller

好吧，不是那樣的讓我覺得自己像個傻瓜！有時候在你的代碼上有第二雙眼睛是很好的。謝謝！ – AgrahamLincoln

我不熟悉玉，但你不需要寫ng-model=而不是ng-model:？

來源

2015-05-20 14:09:42 Michael

謝謝，玉是隻有縮進驅動的HTML沒有結束標籤。我切換到它，因爲它是痛苦的看着整個基礎嵌套div的爛攤子'

AgrahamLincoln

AngularJS - 在ng-include模板中綁定表格範圍

回答

相關問題