如何更改Angular动态中的字段

时间:2015-02-12 21:28:44

标签: javascript jquery angularjs angularjs-scope steroids

我有一个非常简单的问题,我之前已经多次问过不同的方式而没有得到我需要的帮助。所以我熟悉javascript和HTML,但是当谈到Angular和类固醇时,它是一个真正的noob。我已经提供了所有其他问题的代码,但这次我想尝试提供一些图片来说明我的问题,然后也许你们有一个更聪明的解决方案,我认为是可能的。

所以这很容易。用户在视图1(第一张图片)中开始,并且基于他/她的选择,他/她将被转发到下一个视图(图片2)。如果用户点击列表元素按钮1,他/她将被转发到图片2,复选框按钮1.1,按钮1.2和按钮1.3。但是,如果他/她点击了视图1中的按钮2(第一张图片),他/她应该被转发到与他/她点击按钮1时相同的视图(图片2),只有这次他/她的值复选框应该是按钮2.1,按钮2.2和按钮2.3。这怎么可能??我使用范围,我想改变它的动态,但经过1000次尝试我已经放弃了,我只会看到解决方案的工作。请帮忙

View 1

View 2

使用代码更新 好的,所以我在这篇文章中添加了som代码,但请展示一个有效的解决方案。代码示例与上述几乎相同,只是有一些小差别。单击index1.html中的Button 1时,应将用户转发到index2.html,范围值应为button1。如果用户单击button2,则范围值应为button2。但是,范围值保持不变,并且不会从原点值变为"索引2"。我在第一种情况下没有提供代码的原因是因为我只想要一个显示下面第一张图片的解决方案,并点击其中一个选项,用户将进入下一个视图(图2),并看到复选框值基于他/她点击的按钮。我不想创建三个html页面以显示每个按钮的不同值,我想动态更改值。怎么可能???请看下面的代码。

的index.html

    <!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.12/angular.js" data-semver="1.3.12"></script>
    <script src="app.js"></script>
  </head>

  <body>
<div ng-controller="IndexController">
      <a class="item" href="#" ng-click="button1()">
        Button1
      </a>
      <br> <br>
      <a class="item" href="#" ng-click="button2()">
        Button2
      </a>
</div>
  </body>
</html>

Index2.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.12/angular.js" data-semver="1.3.12"></script>
    <script src="app.js"></script>
  </head>

  <body>
<div ng-app="plunker" ng-controller="IndexController2" >

<b> {{Test}} </b>

</div>
  </body>
</html>

app.js

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

app.controller('IndexController', function($scope, $rootScope) {  




     $scope.button1 = function(){   
       console.log("inside button1");
 $scope.Test = "Button1";

        // The code to change the view from Index.html to index2.html
        /*  var view = new supersonic.ui.View("legeApp#helsePlagerOrer");
            //supersonic.ui.layers.push(view);
            var customAnimation = supersonic.ui.animate("flipHorizontalFromLeft");
            supersonic.ui.layers.push(view, { animation: customAnimation });*/
        };

     $scope.button2 = function(){   
       console.log("inside button2");
        $scope.Test = "Button2";

            // The code to change the view from Index.html to index2.html
        /*  var view = new supersonic.ui.View("legeApp#helsePlagerNese");
            //supersonic.ui.layers.push(view);
            var customAnimation = supersonic.ui.animate("flipHorizontalFromLeft");
            supersonic.ui.layers.push(view, { animation: customAnimation });*/
        };

    });

    app.controller('IndexController2', function($scope, $rootScope) {   
      $scope.Test = "index 2";
    });

0 个答案:

没有答案