I want to create a function to enter data in AngularJS and add a list to another page like Todo list.

Page1.html is the input form in the sample Onsen UI Tabbar, and Page2.html is the output of the input result.I was able to have AngularJS input text on Page1 and Page2 display the text I wrote on Page1, but I tried to create a function to add text lists on Page2 using onsenUI's ons-lazy-repeat by pressing the send button on Page1, but it didn't work.I don't know because I mentioned AngularJS only recently, but please let me know.

index.html

<!DOCTYPE HTML>
<html>
<head>
<metacharset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=no">
<meta http-equiv="Content-Security-Policy" content="default-src*;style-src*'unsafe-inline';script-src*'unsafe-inline' 'unsafe-eval'>
<script src="components/loader.js"></script>
<script src="components/script.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
    var app=ons.bootstrap();

    app.factory("SharedStateService", function(){
        US>return{
            text: 'SharedStateService'
        };
    });

    app.controller("ShareControllerA", function($scope, SharedStateService){
        $scope.data =SharedStateService;

    });

    app.controller("ShareControllerB", function($scope, SharedStateService){
        $scope.data =SharedStateService;
    });

    app.controller("ShareControllerC", function($scope, SharedStateService){
        $scope.data =SharedStateService;
    });
</script>
</head>
<body>
<ons-navigator var="myNavigator" page="page1.html">
</ons-navigator>

<ons-tabbar var="tabbar">
        <ons-tabbar-item
        icon="home"
        label="Home"
        page="page1.html"
        active="true"></ons-tabbar-item>
        <ons-tabbar-item
        icon="comment"
        label = "Comments"
        page="page2.html">/ons-tabbar-item>
        <ons-tabbar-item
        icon="gear"
        label = "Settings"
        page="page3.html">/ons-tabbar-item>
</ons-tabbar>

</body>
</html>

page1.html

<ons-page>
        <ons-toolbar>
            <div class="center"> Navigator</div>
        </ons-toolbar>

        <h4>Shared State Service</h4>
        <div ng-controller="ShareControllerA">
            <ons-list-header>This is ShareControllerA</ons-list-header>
            <ons-list-item><input type="text" class="text-input"ng-model="data.text" style="80%">/ons-list-item>

        </div>


        <div style="text-align:center">
            <br>
            <ons-buttoning-click="myNavigator.pushPage('page2.html')">
                Add List
            </ons-button>
        </div>
</ons-page>

page2.html

<ons-page>
<ons-toolbar>
    <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">Page2</div>
    </ons-toolbar>

    <div ng-controller="ShareControllerC">
        <h5>This is ShareControllerC</h5>
    <ul class="list">
    <lic class="list__item list__item --tappable">
    <label class="radio-button">
    <input type="radio"name="r"checked="checked">
        <div class="radio-button__checkmark"></div>
            {{data.text}}
        </label><br>
    </li>  
    </ul>

    </div>
</ons-page>

onsen-ui angularjs

2022-09-30 16:39

1 Answers

We have prepared variables in the factory to keep the entered text as an array.
I defined the add() method in ShareControllerA to add text to the array when the button is pressed.
I defined a delegate object in ShareControllerC to use ons-lazy-repeat
I used ons-tabbar for navigation.

index.html

<!DOCTYPE HTML>
<html>
<head>
<metacharset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=no">
<meta http-equiv="Content-Security-Policy" content="default-src*;style-src*'unsafe-inline';script-src*'unsafe-inline' 'unsafe-eval'>
<script src="components/loader.js"></script>
<script src="components/script.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
    var app=ons.bootstrap();

    app.factory("SharedStateService", function(){
        var array=[];
        US>return{
            items:array,
            append:function(s){
                array.push(s);
            }
        }
    });

    app.controller("ShareControllerA", function($scope, SharedStateService){
        $scope.add=function(){
            SharedStateService.append($scope.data.text);
            tabbar.setActiveTab(1);
        }
    });

    app.controller("ShareControllerC", function($scope, SharedStateService){
        // Deligate for ons-lazy-repeat
        // // http://ja.onsen.io/guide/overview.html#UsingLazyRepeat
        $scope.MyDelegate={
          countItems: function(){
            // Return number of items.
            returnSharedStateService.items.length;
          },

          calculateItemHeight: function(index){
            // Return the height of an item in pixels.
            return45;
          },

          configureItemScope:function(index,itemScope){
            // Initialize scope
            itemScope.item=SharedStateService.items [index];
          },

          destroyItemScope: function(index,itemScope){
            // Optional method that is called when an item is unloaded.
            console.log('Destroyed item with index:'+index);
          }
        };
    });
</script>
</head>
<body>
<ons-tabbar var="tabbar">
        <ons-tabbar-item
        icon="home"
        label="Home"
        page="page1.html"
        active="true"></ons-tabbar-item>
        <ons-tabbar-item
        icon="comment"
        label = "Comments"
        page="page2.html">/ons-tabbar-item>
        <ons-tabbar-item
        icon="gear"
        label = "Settings"
        page="page3.html">/ons-tabbar-item>
</ons-tabbar>

</body>
</html>

page1.html

<ons-page>
        <ons-toolbar>
            <div class="center"> Navigator</div>
        </ons-toolbar>

        <h4>Shared State Service</h4>
        <div ng-controller="ShareControllerA">
            <ons-list-header>This is ShareControllerA</ons-list-header>
            <ons-list-item><input type="text" class="text-input"ng-model="data.text" style="80%">/ons-list-item>

            <div style="text-align:center">
                <br>
                <ons-buttoning-click="add()">
                    Add List
                </ons-button>
            </div>
        </div>
</ons-page>

page2.html

<ons-page>
<ons-toolbar>
    <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">Page2</div>
    </ons-toolbar>

    <div ng-controller="ShareControllerC">
        <h5>This is ShareControllerC</h5>
    <ul class="list" ons-lazy-repeat="MyDelegate">
    <lic class="list__item list__item --tappable">
    <label class="radio-button">
    <input type="radio"name="r"checked="checked">
        <div class="radio-button__checkmark"></div>
            {{item}}
        </label><br>
    </li>  
    </ul>

    </div>
</ons-page>

2022-09-30 16:39

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656