简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
angular.js - 怎么用Angularjs 来实现如图
仅有的幸福
仅有的幸福 2017-05-15 16:50:42
0
3
606

每一行作为一个订单商品详情
选择商品填充商品名称，价格
数量默认为1，价格和数量可以手动修改，总价不能修改 总价=数量*单价；

怎么绑定这个每一行的model啊

仅有的幸福
仅有的幸福

Antworte allen(3)
洪涛
洪涛2017-05-15 16:52:42 3 Etage

写了一个sample做参考:

<body ng-app="orderSum">
    <table ng-controller="orderController">
        <thead>
            <tr>
                <th>序号</th>
                <th>数量</th>
                <th>单价</th>
                <th>总价</th>
            </tr>
        </thead>
        <tbody ng-repeat="order in orders track by $index">
            <tr>
                <td>{{ $index+1 }}</td>
                <td><input ng-model="order.count"></td>
                <td><input ng-model="order.price"></td>
                <td><input readonly="true" value="{{ order.count * order.price }}"></td>
            </tr>
        </tbody>
    </table>
    <script>
    var myApp = angular.module("orderSum",[]);
    myApp.controller("orderController",['$scope',function($scope){
        $scope.orders=[];
        $scope.orders.length=10;
    }]);
    </script>
</body>
Wie +0
Antwort hinzufügen
滿天的星座
滿天的星座2017-05-15 16:52:42 2 Etage

ng-repeat + array.push({id:1,name:'',price:0,num:0})

ng-repeat='x in array'

ng-model='x.num'

ng-model='x.price'

ng-bind='x.num * x.price'

Wie +0
Antwort hinzufügen
習慣沉默
習慣沉默2017-05-15 16:52:42 1 Etage

ngRepeat

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！