不确定在我的情况下使用ng-options的最佳方法

时间:2016-03-16 22:28:11

标签: javascript html angularjs

我在决定如何最好地解决这个问题时遇到了一些麻烦。我有一组像这样的对象:

$scope.assessments = [
    {
      "name": "Goldman-Fristoe Test of Articulation - 2nd Edition",
      "description": "Description of Goldman-Fristoe test.",
      "selected": false,
      "templateURL": "Goldman-Fristoe-2ndGen.html",
      "subtests": [
        {
          "name": "subtest1",
          "description": "this is a description for subtest1"
        },
        {
          "name": "subtest2",
          "description": "this is a description for subtest1"
        },
        {
          "name": "subtest3",
          "description": "this is a description for subtest1"
        }]
      },
      {
        "name": "Oral and Written Language Scales-II (OWLS-II)",
        "description": "this is a description for the OWLS test",
        "selected": false,
        "templateURL": "OWLS-II.html",
        "subtests": []
      },
      {
        "name": "Peabody Picture Vocabulary Test - 4 (PPVT-4)",
        "description": "Description for Peabody Picture Vocabulary Test - 4",
        "selected": false,
        "templateURL": "PPVT-4.html",
        "subtests": []
      },
      {
        "name": "Comprehensive Assessment of Spoken Language (CASL)",
        "description": "Comprehensive Assessment of Spoken Language is a norm-referenced, standardized measure used to evaluate receptive (R) and expressive (E) language skills. Results on the individual tests are used to determine the Core Composite score, which provides an overall measure of the examinee’s language performance. Average standard scores are 85-115 with a mean of 100 and a standard deviation of 15.",
        "selected": false,
        "templateURL": "CASL.html",
        "subtests": [
          {
            "name": "Comprehension of Basic Concepts",
            "description": "This 43-item subtest measures knowledge of words deemed necessary for children to succeed during the first few years of school. The student points to a picture that best represents the meaning of a word given by the examiner.",
            "standardScore": 0,
            "selected": false,
            "percentile": 0,
            "descriptionOptions": [{"name": "Below Average", "selected": false}, {"name": "Average", "selected": false}, {"name": "Above Average", "selected": false},]
          },
          {
            "name": "Synonyms",
            "description": "This 61-item subtest requires students to choose which one of four words has a meaning similar to that of the stimulus word given by the examiner. The student can respond either by stating the word or by nonverbally indicating a choice. Antonyms  This 55-item subtest requires students to express words that are opposite in meaning to those posed by the examiner. An open-ended format is used: The student must search, retrieve, and recall individual word answers.",
            "standardScore": 0,
            "selected": false,
            "percentile": 0,
            "descriptionOptions": [{"name": "Below Average", "selected": false}, {"name": "Average", "selected": false}, {"name": "Above Average", "selected": false},]
          },
          {
            "name": "Antonyms",
            "description": "This 55-item subtest requires students to express words that are opposite in meaning to those posed by the examiner. An open-ended format is used: The student must search, retrieve, and recall individual word answers.",
            "standardScore": 0,
            "selected": false,
            "percentile": 0,
            "descriptionOptions": [{"name": "Below Average", "selected": false}, {"name": "Average", "selected": false}, {"name": "Above Average", "selected": false},]
          },
          {
            "name": "Sentence Completion",
            "description": "This 61-item subtest requires students to provide words that appropriately complete sentences read by the examiner. Each item consists of a sentence with one missing word at the end of the sentence.",
            "standardScore": 0,
            "selected": false,
            "percentile": 0,
            "descriptionOptions": [{"name": "Below Average", "selected": false}, {"name": "Average", "selected": false}, {"name": "Above Average", "selected": false},]
          },
          {
            "name": "Idiomatic Language",
            "description": "This 49-item subtest consists of common idioms that students must complete. The student is instructed to \"tell what has been left out\" in a sentence that includes meaningful use of an idiom.",
            "standardScore": 0,
            "selected": false,
            "percentile": 0,
            "descriptionOptions": [{"name": "Below Average", "selected": false}, {"name": "Average", "selected": false}, {"name": "Above Average", "selected": false},]
          },
          {
            "name": "Syntax Construction",
            "description": "This 56-item subtest measures the oral expression of words, phrases, and sentences and the degree to which students use appropriate rules in formulating and expressing sentences. Young children are required to imitate and formulate simple phrases and sentences, whereas adolescents must develop more complex sentences. Each item is presented with a picture.",
            "standardScore": 0,
            "selected": false,
            "percentile": 0,
            "descriptionOptions": [{"name": "Below Average", "selected": false}, {"name": "Average", "selected": false}, {"name": "Above Average", "selected": false},]
          },
          {
            "name": "Paragraph Comprehension of Syntax",
            "description": "This subtest comprises eight paragraphs, with five to seven questions per paragraph, all of which are read by the examiner. Sentences in the paragraphs are of increasing syntactic complexity. The student responds to questions by pointing to one of four pictures that best illustrates the correct answer to the question.",
            "standardScore": 0,
            "selected": false,
            "percentile": 0,
            "descriptionOptions": [{"name": "Below Average", "selected": false}, {"name": "Average", "selected": false}, {"name": "Above Average", "selected": false},]
          },
          {
            "name": "Grammatic Morphemes",
            "description": "This 60-item subtest consists of analogies for which students must recognize semantic relationships between words to provide a correct answer. Pictures accompany the first items for young children.",
            "standardScore": 0,
            "selected": false,
            "percentile": 0,
            "descriptionOptions": [{"name": "Below Average", "selected": false}, {"name": "Average", "selected": false}, {"name": "Above Average", "selected": false},]
          },
          {
            "name": "Sentence Comprehension of Syntax",
            "description": " Each item in this 21-item test is composed of two pairs of sentences. The first sentence in each pair is the model sentence. The student must determine whether the second sentence has the same meaning as the model sentence. Sentences differ only in terms of syntactic structure (word order, clause construction, and so forth).",
            "standardScore": 0,
            "selected": false,
            "percentile": 0,
            "descriptionOptions": [{"name": "Below Average", "selected": false}, {"name": "Average", "selected": false}, {"name": "Above Average", "selected": false},]
          },
          {
            "name": "Grammaticality Judgment ",
            "description": "This 57-item subtest requires students to indicate whether grammatically correct and noncorrect sentences presented by the examiner are \"the correct way to speak in class.\" If the student indicates that a sentence is not grammatically correct, he or she must fix it by changing only one word and not the meaning of the sentence. ",
            "standardScore": 0,
            "selected": false,
            "percentile": 0,
            "descriptionOptions": [{"name": "Below Average", "selected": false}, {"name": "Average", "selected": false}, {"name": "Above Average", "selected": false},]
          },
          {
            "name": "Nonliteral Language Test",
            "description": "This 50-item subtest comprises sentences read by the examiner that include figurative, indirect, or sarcastic language by the speaker. After reading the sentence(s), the student is required to explain what was meant by the nonliteral language.",
            "standardScore": 0,
            "selected": false,
            "percentile": 0,
            "descriptionOptions": [{"name": "Below Average", "selected": false}, {"name": "Average", "selected": false}, {"name": "Above Average", "selected": false},]
          },
          {
            "name": "Meaning from Context",
            "description": "This 48-item subtest includes sentences that contain one unknown or difficult word. After the examiner reads the sentence, the student must articulate what he or she thinks the target word means given the context of the sentence.",
            "standardScore": 0,
            "selected": false,
            "percentile": 0,
            "descriptionOptions": [{"name": "Below Average", "selected": false}, {"name": "Average", "selected": false}, {"name": "Above Average", "selected": false},]
          },
          {
            "name": "Inference Test",
            "description": "This 52-item subtest includes episodes of two to three sentences read by the examiner that require utilization of background knowledge to comprehend. A question accompanies each episode; the student answers each question in her or his own words, based on an understanding of the sentences.",
            "standardScore": 0,
            "selected": false,
            "percentile": 0,
            "descriptionOptions": [{"name": "Below Average", "selected": false}, {"name": "Average", "selected": false}, {"name": "Above Average", "selected": false},]
          },
          {
            "name": "Ambiguous Sentences Test",
            "description": "In this 43-item subtest, the examiner reads a sentence that has two potential meanings. The student is required to explain the two possible meanings of the sentence.",
            "standardScore": 0,
            "selected": false,
            "percentile": 0,
            "descriptionOptions": [{"name": "Below Average", "selected": false}, {"name": "Average", "selected": false}, {"name": "Above Average", "selected": false},]
          },
          {
            "name": "Pragmatic Judgment",
            "description": " This 60-item test is made up of a series of stories describing everyday life situations. After listening to these vignettes, the students must either judge the appropriateness of the language used by those in the story or suggest language appropriate for the given situation. ",
            "standardScore": 0,
            "selected": false,
            "percentile": 0,
            "descriptionOptions": [{"name": "Below Average", "selected": false}, {"name": "Average", "selected": false}, {"name": "Above Average", "selected": false},]
          }]
        },
        {
          "name": "Pragmatic Language Skills Inventory (PLSI)",
          "description": "PLSI description",
          "selected": false,
          "templateURL": "PLSI.html",
          "subtests": []
        },
        {
          "name": "Structured Photographic Expressive Language Text - 3 (SPELT-3)",
          "description": "SPELT-3 description",
          "selected": false,
          "templateURL": "SPELT-3.html",
          "subtests": []
        }
      ];

我目前正在研究Comprehensive Assessment of Spoken Language (CASL)评估对象。我试图提出一个可以动态添加subtests的表格。使用ng-include我加载templateURL。这是CASL对象的一个​​:

<h4><b><u>{{assessment.name}}</u>:</b></h4>
<p>{{assessment.description}}</p>

<table>
  <tr>
    <th>Subtests</th>
    <th>Standard Score</th>
    <th>Percentile</th>
    <th>Description</th>
  </tr>
  <tr ng-repeat="i in CASLgetDesiredSubtestCount()">
    <td>
      <!-- <select ng-model="CASLselectedSubtest" ng-blur="CASLaddSubtest(CASLselectedSubtest)" ng-change="CASLselectedSubtestDescriptionOptionsOnChange(CASLselectedSubtest)" ng-options="subtest as subtest.name for subtest in assessment.subtests | orderBy:'name' | filter:subtest.selected=false"></select> -->
      <select ng-model="CASLselectedSubtest" ng-change="CASLaddSubtest(CASLselectedSubtest)" ng-options="subtest as subtest.name for subtest in assessment.subtests | orderBy:'name' | filter:subtest.selected=false">
      </select>
    </td>
    <td><input type="text" ng-model="CASLsubtestStandardScore" /></td>
    <td><input type="text" ng-model="CASLsubtestPercentile" /></td>
    <td>
      <select ng-model="CASLselectedSubtestDescription" ng-change="" ng-options="descriptionOption as descriptionOptions.name for descriptionOptions in assessment.subtests[CASLselectedSubtestIndex].descriptionOptions">
        <!-- <option ng-repeat="description in CASLselectedSubtestDescriptionOptions" value="description">{{description}}</option> -->
      </select>
    </td>
  </tr>
</table>
<button ng-click="CASLaddDesiredSubTest()">Add Subtest</button>
<br />
<div ng-repeat="subtest in CASLsubtests">
  <div ng-show="subtest.selected">
    <p><b><u>{{subtest.name}}</u>:</b></p>
    <p>{{subtest.description}}</p>
  </div>
</div>
<hr />

我对AngularJS很新,所以我不确定这样做的最佳方法。当然,稍后我需要将selected subtests保存到数据库中。

我的目标是能够单击Add Subtest Button,这会添加另一个表行,并将这些值绑定到我可能发送到数据库的JSON对象。我对如何准确地解决这个问题感到困惑。我是否需要动态添加ng-models?如果是这样,我该怎么做?或者,有没有办法获取当前选定的行对象,并且可以使用this关键字?我所拥有的几乎是在工作但不完全是我希望它如何工作,我对如何最好地解决这个问题感到困惑......

我希望这篇文章有道理,我目前还没有多少时间来格式化我的问题。希望它足以让我的观点得到解决。如果您需要发布更多代码,我可以继续,如果需要,只需发布​​所有代码。提前感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

如果我正确地阅读了您的问题...您的ng-repeat="subtest in CASLsubtests"应该更新CASLsubtests对象的更新。

因此,如果您的CASLaddDesiredSubTest()功能修改了CASLsubtests对象,那么您应该会在列表中看到新添加的子测试。

CASLsubtests充当您的模型,因此当您需要对数据进行任何进一步操作时,您可以轻松访问它。