使用AngularJS表達式來總結ASP.NET MVC中的兩個數字4

我一直在尋找這一段時間，但是我找不到解決我的問題的任何東西。使用AngularJS表達式來總結ASP.NET MVC中的兩個數字4

問題：

我一直在考慮一個任務顯示在運行兩個數字的總和，例如：

TextBox1 = 2

TextBox2 = 3

Result = 5

N只要用戶更改TextBox1或TextBox2值Result應立即顯示其總和，我必須使用AngularJs這樣做。

我有什麼迄今所做的：低於

我開始學習AngularJs，我認爲兩數相加爲上述很簡單，我的代碼可以做到這一點：

<div data-ng-app="" data-ng-init="numberA=2;numberB=3"> 
    Number 1: <input type="number" ng-model="numberA"> 
    Number 2: <input type="number" ng-model="numberB"> 
    <p><b>Sum:</b> {{numberA + numberB}}</p> 
</div>

我不能做的是，做在ASP.NET MVC 4完全相同的事情，我創建了一個新的項目，上述工作正常，但當我開始使用Models它不起作用。

型號：

public class Check 
{ 
    public int numberA { get; set; } 
    public int numberB { get; set; } 
}

查看：

<div data-ng-app=""> 
    @Html.TextBoxFor(model => model.numberA, new { @data-ng-model = "numberA" }) 
    @Html.TextBoxFor(model => model.numberB, new { @data-ng-model = "numberB" }) 
    <p>Result: {{ numberA + numberB }} </p> 
</div>

現在我知道上面不會工作，因爲我做了一些研究，發現這是行不通的，但我找不到完成我的任務的另一種方式。大部分結果表明我需要創建簡單的.html文件才能完成此項工作。

問：

有沒有這樣做上面的一個簡單的方法？例如，讓我可以輕鬆地將AngularJs整合到Razor視圖中？
如果上述問題的答案是否定的，那麼執行上述任務的最佳方法是什麼？
難道沒有辦法使用Razor Views和AngularJs在一起嗎？

來源

2014-10-22 Syed Farjad Zia Zaidi

你能澄清你發現了什麼嗎？爲什麼它不起作用，是因爲你不能設置「@ data-ng-model」？請參閱[與asp.net mvc的連字符html屬性]（http://stackoverflow.com/q/2897733/247702） – Stijn 2014-10-22 08:20:52

@Stijn這工作，這樣一個小錯誤:(但任何方式現在我的表達'{{a + b }}''將'a'和'b'連接起來不執行算術和，但是如果我做'{{a * b}}'它正在執行乘法運算正確。 – 2014-10-22 08:39:35

什麼是呈現的HTML？'public int numberA'應該呈現爲一個' Stijn 2014-10-22 08:41:21

有兩個問題。

第一個問題是您沒有正確設置data-ng-model屬性you must use underscores instead of hyphens。

第二個是，雖然EditorFor將正確設置type="number"爲int，TextBoxFor不會做到這一點，所以你需要手動設置。

<div data-ng-app=""> 
    @Html.TextBoxFor(model => model.numberA, new { data_ng_model = "numberA", @type="number" }) 
    @Html.TextBoxFor(model => model.numberB, new { data_ng_model = "numberB", @type="number" }) 
    <p>Result: {{ numberA + numberB }} </p> 
</div>

來源

2014-10-22 08:48:44 Stijn

謝謝你這個工作，但是你能告訴我怎麼把這個表達式{{a + b}}'變成'@Html .TextBoxFor（model => model.b，new {ng_model =「numberB」，@type =「number」}）'？ – 2014-10-22 08:51:57

@SyedFarjadZiaZaidi我不明白你的意思，對不起。我假設結果現在正確計算而不是做字符串連接？什麼是期望的HTML？ – Stijn 2014-10-22 08:53:40

是的結果是計算，它的工作正常，但例如，我想將結果設置爲'文本框'呈現使用'Html幫助函數'... – 2014-10-22 08:56:49

使用AngularJS表達式來總結ASP.NET MVC中的兩個數字4

回答

相關問題