Angular / IONIC模型之和

克里斯蒂亚诺·卡多佐(Cristiano Cardoso)

我正在创建一个非常简单的东西,它将像您要计算的那样计算多个单选按钮的值?已经定义了一个ng模型,以及每个无线电的值,它们位于单独的屏幕上,我想显示结果在最后一个屏幕中。

<ion-view title="Primeira Pergunta">
<ion-content padding="'true'" class="has-header">
    <h3>Escolha a quantidade de equipamento</h3>
    <form class="list">
        <ion-radio ng-model="item.value" ng-value="1000">até 10</ion-radio>
        <ion-radio ng-model="item.value" ng-value="2000">até 50</ion-radio>
        <ion-radio ng-model="item.value" ng-value="6000">até 100</ion-radio>
        <ion-radio ng-model="item.value" ng-value="5000">Franquias</ion-radio>
        <ion-radio ng-model="item.value" ng-value="9000">Corporate</ion-radio>
        <ion-radio ng-model="item.value" ng-value="300000">Cobertura Nacional</ion-radio>
    </form>
    <div class="spacer" style="width: 300px; height: 15px;"></div>
    <a menu-close="" href="#/page3" class="button button-assertive button-block ">Próximo</a>
</ion-content>

<ion-view title="Segunda Pergunta">
<ion-content padding="'true'" class="has-header">
    <h4>Você já o flagrou lhe observando enquanto você não estava olhando?</h4>
    <form class="list"></form>
    <form class="list">
        <ion-radio ng-model="item.value" ng-value="30">Não</ion-radio>
        <ion-radio ng-model="item.value" ng-value="70">Sim, 1 vez!</ion-radio>
        <ion-radio ng-model="item.value" ng-value="100">Sim, Mais de 1 vez!</ion-radio>
    </form>
    <div class="spacer" style="width: 300px; height: 142px;"></div>
    <a menu-close="" href="#/page4" class="button button-assertive button-block ">Próximo</a>
</ion-content>

计算结果将显示在此处:

<ion-view title="Resultado">
<ion-content padding="'true'" class="has-header">
    <img src="img/AUQTMPyoQBGBfnD5HDC7_logo-portal-wp-como-conquistar-um-homem.png" width="100%" height="auto" style="width: 100%; height: auto;">
    <h2>Você Fez:</h2>
    <div>{{item.value}}</div>
    <a href="https://e-editora.leadpages.co/leadbox/1457a340bf72a2%3A944764f46/5668783041544192/" target="_blank" style="color: rgb(255, 255, 255); text-decoration: none; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 16px; line-height: 20px; display: inline-block; max-width: 300px; border-radius: 5px; background: rgb(255, 206, 10);">Clique Aqui e veja uma analise personalizada da sua nota</a>
</ion-content>

我不是专家,只是大学的一份工作,如何用js进行此计算?

AdsHan

每个问题必须具有不同的ng模型。在您可以以这种方式总结ng-model之后:

<h2>Você Fez:</h2>
<div>{{value1 + value2}}</div>

或使用功能

<h2>Você Fez:</h2>
<div>{{ getTotal() }}</div>

$scope.getTotal = function(){    
   $scope.value1 + $scope.value2;     
   return ...

现在,如果您的离子视图位于单独的控制器上,则必须与AngularJs在控制器之间共享$ scope,否则您需要重新考虑问题。

看到这里:http : //gonzalo123.com/2014/09/08/sharing-scope-between-controllers-with-angularjs/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Angular 4 - 数组之和

来自分类Dev

Angular JS动态模型

来自分类Dev

连接Angular模型数据

来自分类Dev

从Angular指令更新模型

来自分类Dev

Angular,构建错误模型

来自分类Dev

模拟$ http Angular Ionic

来自分类Dev

Ionic / Angular:避免 ExpressionChangedAfterItHasBeenCheckedError

来自分类Dev

Angular Ionic 风格改变

来自分类Dev

Ionic Angular 中的 HttpErrorResponse

来自分类Dev

计算的属性,返回每个模型的属性之和

来自分类Dev

Angular模型不更新-Angular.js

来自分类Dev

ionic / angular与Angular 9不兼容

来自分类Dev

Angular是否了解关系模型?

来自分类Dev

Angular 2聆听模型更改

来自分类Dev

Angular 2:ReactiveForm更新模型

来自分类Dev

Angular了解关系模型吗?

来自分类Dev

在Angular中使用变量模型

来自分类Dev

Angular JS模型未更新

来自分类Dev

Angular指令不会更新模型

来自分类Dev

Angular 1.5单选按钮模型

来自分类Dev

Angular 2 - 如何更新模型

来自分类Dev

Ionic 2 / Angular - 操作 JSON

来自分类Dev

Ionic Firebase Angular 异步验证

来自分类Dev

如何通过has_many关系的属性之和过滤模型

来自分类Dev

计算数组angularjs中每个ng模型的值之和

来自分类Dev

带有Angular JS 1或Angular JS 2的Ionic 1

来自分类Dev

如何使用$ http响应更新Angular模型?

来自分类Dev

Angular-淘汰赛模型共享

来自分类Dev

寻找启用模型封装的Angular Directive