Question

我遇到了一个我正在整理的网络表单的问题

目的是让用户检查一系列复选框，然后显示与这些复选框相关的一系列提示

这是我到目前为止的简要版本：

myApp.controller('MyController', function MyController($scope) {

    $scope.tips = [
    {   

        heading: "Handy Tip Number 1",
        body : "This is a great tip you're sure to love it",
        usp: false,
        cleargoal: true


    },
    {
            heading: "Handy Tip Number 2",
        body : "This is a great tip you're sure to love it",
        usp: true,
        cleargoal: true

    },
    {
        heading: "Handy Tip Number 3",
        body : "This is a great tip you're sure to love it",
        usp: true,
        cleargoal: false


    },
    {
        heading: "Handy Tip Number 4",
        body : "This is a great tip you're sure to love it",
        usp: false,
        cleargoal: false

    },
    {
        heading: "Handy Tip Number 5",
        body : "This is a great tip you're sure to love it",
        usp: false,
        cleargoal: true,


    }
]});

和

    <form >
        <input ng-model="easyTips" type="radio" value="usp" name="usp">

</form>

<form >
        <input ng-model="hardTips" value="cleargoal" type="radio" name="clear goal" >


</form>



<div div ng-controller="MyController">
            <div ng-repeat="items in tips">
                    <div ng-show="items[easyTips] || items[hardTips]">
                            <h2>{{items.heading}}</h2>
                            <p>{{items.body}}</p>
                    </div>  

            </div>
    </div>

这是有效的，但是不是单选按钮，我希望输入是复选框，以便用户可以选择和取消选择多个选项，我找不到任何关于如何进行更改的内容。

Answer 1

在特定输入框上使用type =“checkbox”而不是type =“radio”。

Answer 2

您需要将ng-true-value与type="checkbox"一起使用并将其设置为'usp'或'cleargoal'，以便每当用户检查checkbox easyTips时1}}和hardTips ng-model将分别具有这些值。

<form >
        <input ng-model="easyTips" type="checkbox" ng-true-value="'usp'" />
{{easyTips}}
</form>

<form >
        <input ng-model="hardTips" ng-true-value="'cleargoal'"  type="checkbox" name="clear goal">
        {{hardTips}}


</form>

<强> FULL EXAMPLE

使用多个复选框通过ng-show生成结果

2 个答案: